Pagination Container Box gets cut off when default font size is not 16px

[AmilaDotDev]

material-react-table version

2.12.1

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

To reproduce, Change the default font size something smaller than 16px, say 8px.

I found out that this is due to the container box having absolute position in non mobile widths. Combine this with Bottom toolbar having a minimum height of 3.5rem, the height of the toolbar gets smaller as the base font size is reduced.

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/jovial-currying-2djx7y?workspaceId=02937a3f-b326-4914-8ff6-a52e63e2672a

The example is a bit extreme as the font size is not readable, but if you increase the font size, pagination box doesn't align to the middle of the bottom toolbar. If absolute position of the pagination container box is removed, I don't think the minimum height is necessary either. This is the first time I'm using material-react-table so don't know if removing those properties will affect any other elements that might be in the bottom toolbar.

Screenshots or Videos (Optional)

material-react-table.mp4

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[moonbeam-dev]

I am also encountering this issue where the pagination container box is cut off in the desktop view. No issues with mobile view.

For now I am setting a minHeight to the bottom toolbar as a workaround:

  muiBottomToolbarProps: {
    sx: {
      minHeight: '56px'
    }
  },