Repository navigation
fix(ui): keep the Models page fixed and give its tabs and filters room - #12899
Merged
Merged
Conversation
The document scrolled again on the gallery. The screen-reader spans in the table rows are position: absolute, and nothing above them was positioned, so they resolved against the viewport, escaped the table scroller and the pinned shell, and stretched the document to about twice the window height. Make the table scroller and the full-height page the containing block, so the spans are clipped with the rows. The tabs and filters were also packed tight. Raise the view tabs to 40px with an accent underline on the current one, space the facet chips and toggles apart, give toggles, chips, density and state segments a hit area of at least 36px (40 to 44px on phones), and leave more air between the filter rows. Existing --dk-* tokens only. Add a spec that checks the document height equals the window height while the table still overflows. Assisted-by: Claude:claude-sonnet-5-5 [Claude Code] Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What
Two fixes on the Models page.
The page scrolled as a whole again. The gallery is meant to be a fixed-height page where only the table scrolls. The screen-reader spans in the table rows are
position: absolute, and no ancestor was positioned, so they resolved against the viewport, escaped the table scroller and stretched the document to about twice the window height (1859px in a 900px window)..page--appand.ledger-wrapare now the containing block, so the spans are clipped with the rows.Measured at 1440x900, document scrollHeight / clientHeight:
The document also stays at 900/900 in the loading, error, empty-search and no-results states. Below 900px wide the page still scrolls as a whole, as before.
The tabs and filters were too condensed. After a critique of the rendered page:
Only existing
--dk-*tokens are used. No new strings, no new dependencies,data-testids unchanged.Tests
discover-height.spec.js: document height equals the window height while the table still overflows.discover-height,models-ledger,models-installed-ledger,models-gallery,models-lifecycle,models-cleanup,models-explore-pane-actions,discover-search-focus,models-cluster-fitandinstalled-model-action-menu-positionpass against a rebuilt UI.npm run lintreports 2react-hooks/rules-of-hookserrors ine2e/coverage-fixtures.js; master has the same two.