Move to CSS grid for layout
babeal opened this issue · 3 comments
Is your feature request related to a problem? Please describe.
negative calculations in styles
Is your feature request related to a specific component? Please add.
AppLayout
Describe the solution you'd like
A clear and concise description of what you want to happen.
The app body contains the following style seen below. Since the body element is offset relatively in the document, a main of 100% would cause space below the fold so instead it's calculated. If i decide to change header height now I have to edit these other calculated styles as well. Changing the layout to use CSS grid would fix this and allow the inner main container to reset the bounding box so you won't have to calculate heights
.makeStyles-main-3 {
height: calc(100vh - 65px);
display: flex;
}
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Move to CSS Grid for layout.
Additional context
N/A
Sorry for the delay. Just had a chance to look into this enhancement requirment.
Even with CSS Layout, to support the inner content area scrolling while keeping the nav bar and help panel fix, we still need to set the grid-template-rows with the specified height for the grid.
Happy to add a props for using Custom Header with different height.
Added a prop to allow set the height of header for custom header if it is used.
Closes this issue for now. If there are any further suggestions/recommendation, please create a new issue or pull request.
🎉 This issue has been resolved in version 1.0.30 🎉
The release is available on:
Your semantic-release bot 📦🚀