Pagination Container Box gets cut off when default font size is not 16px
AmilaDotDev opened this issue · 1 comments
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)
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.