Firefox doesn't allow as much height for cells, leading to overflow

[wbrgss]

In my version of Firefox, a dropdown within a cell with a new value selected (i.e. not on initial render) will overflow its cell container. The bottom grey border is overlapped:

Firefox:

Chrome

[wbrgss]

App used for the above gifs (taken from the docs)

expand app

```python import dash import dash_html_components as html import dash_table import pandas as pd from collections import OrderedDict app = dash.Dash(__name__) df = pd.DataFrame(OrderedDict([ ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']), ('temperature', [13, 43, 50, 30]), ('city', ['NYC', 'Montreal', 'Miami', 'NYC']) ])) app.layout = html.Div([ dash_table.DataTable( id='table-dropdown', data=df.to_dict('records'), columns=[ {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'}, {'id': 'temperature', 'name': 'temperature'}, {'id': 'city', 'name': 'city', 'presentation': 'dropdown'}, ], editable=True, dropdown={ 'climate': { 'options': [ {'label': i, 'value': i} for i in df['climate'].unique() ] }, 'city': { 'options': [ {'label': i, 'value': i} for i in df['city'].unique() ] } } ), html.Div(id='table-dropdown-container') ]) if __name__ == '__main__': app.run_server(debug=True) ```

[wbrgss]

In my version of Chrome, the

<div class="dash-dropdown-cell-value-container dash-cell-value-container" />

is rendered with a height of 30px by default (depends on font size), while on Firefox, it is rendered with a height of 25px.

This div has the following CSS applied:

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td .dash-cell-value-container {
    width: 100%;
    height: 100%;
}

In Firefox, if height is manually set to 30px, the issue is resolved (cell is clipped, not overflowing), even on very large font sizes:

I'm using Chrome Version 78.0.3904.108 (Official Build) (64-bit) on PopOS (Ubuntu flavour) and Firefox 70.0.1 (64-bit) on the same OS.

Additional context (private repo): plotly/dash-design-kit#582

[wbrgss]

Also note how the dropdown arrow / x is uncentered, and the overall height of the table is shorter, on the left (Firefox)