[Refactoring] Refined styles for quality page #9068
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation and context
This PR refactors the quality page styles, specifically the tables. Currently, the page layout consists of some static elements and a table with dynamic height. If the table is too large, a scrollbar appears.
Previously, the table’s height was limited using
max-height: calc(100vh - $grid-unit-size * x);
. However, this approach isn’t ideal because, on smaller screens (especially those with a width under 1800px) or when scaling the page, the height needs further adjustments. While media queries could help, they introduce complexity.This PR updates the layout to use a flexbox-based approach instead. The main page now has
display: flex
, and the table inside it usesflex-grow: 1
to fill the remaining space dynamically. To make this work, I also flattened the component structure by removing unnecessary containers.Additionally, I added a media query breakpoint that makes the page scrollable when the width is below 1300px.
How has this been tested?
Checklist
develop
branch[ ] I have created a changelog fragment[ ] I have updated the documentation accordingly[ ] I have added tests to cover my changes[ ] I have linked related issues (see GitHub docs)License
Feel free to contact the maintainers if that's a concern.