Fixed_rows headers aren't fixed when filtering with large amounts of data

[Andris73]

Describe your context
Using the datatable with filters to specify data shown in Backend Paging with Filtering

dash                      2.3.1
dash-core-components      2.0.0
dash-daq                  0.5.0
dash-html-components      2.0.0
dash-table                5.0.0

• OS: [ Microsoft Windows [Version 10.0.19044.1766] ]
• Browser [ chrome 103.0.5060.114 (Official Build) (64-bit) ]

Describe the bug
If I run the example of filtering and adding fixed_rows={'headers': True} and then enter large amounts of text into the filter section the entire row shifts to the left of the screen. I reproduced this using the code shown below

import sys
sys.path.append('python')
sys.path.append('webroot-dash')

from webserver.markdown.data_table import MarkdownDataTable

from dash import Dash, dash_table
from dash.dependencies import Input, Output
import datetime

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
df = df[['continent', 'country', 'pop', 'lifeExp']]  # prune columns for example
df['Mock Date'] = [
    datetime.datetime(2020, 1, 1, 0, 0, 0) + i * datetime.timedelta(hours=13)
    for i in range(len(df))
]

app = Dash(__name__)

app.layout = dash_table.DataTable(
    fixed_rows={'headers': True},
    columns=[
        {'name': 'Continent', 'id': 'continent', 'type': 'numeric'},
        {'name': 'Country', 'id': 'country', 'type': 'text'},
        {'name': 'Population', 'id': 'pop', 'type': 'numeric'},
        {'name': 'Life Expectancy', 'id': 'lifeExp', 'type': 'numeric'},
        {'name': 'Mock Dates', 'id': 'Mock Date', 'type': 'datetime'}
    ],
    data=df.to_dict('records'),
    filter_action='native',

    style_table={
        'height': 400,
    },
    style_data={
        'width': '150px', 'minWidth': '150px', 'maxWidth': '150px',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
    }
)


if __name__ == '__main__':
    app.run_server(debug=True)

Expected behavior
Datatable rows stay fixed in place whilst text/data is entered into the filter

Screenshots

[bw984]

I experience this above-mentioned bug in my Dash apps that utilize a fixed header row for the table. On mobile Safari, the table will rip apart completely, and you lose the ability to scroll left and right to find the bad search to correct it.

In a somewhat adjacent bug, the table does not consider the length of the table header text in each column, so if a user does a table filter search that returns no results, the columns smash together to be impossibly narrow on mobile to select the filter text and remove it.

Here is how the Dash table looks before entering a filter that returns no results.

Here is the table after the bad search. It is impossible to select the text and fix the issue, the entire app/page has to be reloaded.