Fix layout issues in application view caused by missing width constraint#2482
Open
samuelx12 wants to merge 1 commit intonextcloud:mainfrom
Open
Fix layout issues in application view caused by missing width constraint#2482samuelx12 wants to merge 1 commit intonextcloud:mainfrom
samuelx12 wants to merge 1 commit intonextcloud:mainfrom
Conversation
The Application view's per-resource wrapper was missing the 'width: max-content; min-width: var(--app-content-width, 100%)' rule that Table and View pages already apply. This caused two visual bugs exclusive to the Application view: - On narrow viewports, the resource title row had no room to expand horizontally, causing the title text to wrap onto multiple lines. The options bar (search/create-row) is positioned at a fixed top: 60px offset and overlapped the wrapped lines. - On wide tables with horizontal scroll, the sticky header backgrounds ended at the viewport width. Scrolling sideways revealed table content underneath the header area. Aligns Context.vue with the existing pattern in Table.vue and View.vue where the same two CSS lines are already present. Signed-off-by: Samuel Barmet <samuel@barmet.ch>
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
1 participant
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.
Summary
When the Application view was built, the per-resource wrapper (.resource) was not given the same width constraint that the Table and View pages already have:
This single missing rule causes two visual bugs that only appear in the Application view.
Bugs fixed
Bug 1 — Title row wraps on narrow viewports
Without a max-content width on the container, the title row is constrained to the viewport width. On narrow screens, the title text wraps onto multiple lines, making the title row taller than expected. The search/create-row bar is positioned with a fixed top: 60px offset, so it ends up overlapping the wrapped title lines and — at very narrow widths — even the table rows below.
Bug 2 — White header background does not extend on horizontal scroll
The sticky header backgrounds (title and options bar) inherit the container width, which is viewport-wide. When the table is wider than the viewport and the user scrolls horizontally, the white background ends at the right edge of the viewport, revealing the table content underneath the header.
Fix
Added the two missing CSS lines to .resource in src/pages/Context.vue:
This is exactly how Table.vue and View.vue already handle the same layout. The fix aligns the Application view with the existing pattern in the codebase.