DataTable dropdown arrow overlaps cell content when clearable is False

In Dash 2.1.0 when using dropdowns in DataTable and setting clearable to False, the dropdown arrow overlaps the cell content.

Minimal example:

from dash import Dash, dash_table, html

app = Dash(__name__)

app.layout = html.Div(
    dash_table.DataTable(
        id="test",
        data=[
            {"greeting": "hello", "bool_value": True},
            {"greeting": "world", "bool_value": False},
        ],
        columns=[
            {"name": "greeting", "id": "greeting"},
            {"name": "bool_value", "id": "bool_value", "editable": True, "presentation": "dropdown"},
        ],
        dropdown={
            "bool_value": {
                "options": [{"label": "false", "value": False}, {"label": "true", "value": True}],
                "clearable": False,
            }
        }
    )
)

app.run_server(host="0.0.0.0", port=8000)

Start by running the minimal Dash example with a DataTable dropdown whose clearable option is false, then inspect the DataTable dropdown rendering and styles. Done means the arrow no longer overlaps the cell content in this configuration while the dropdown remains usable.