Repository navigation
fix(dashboard): fit the whole board in the window on short screens - #91
Merged
Merged
Conversation
The dashboard is a single-screen overview but used fixed desktop spacing (24px card padding, 32px hero padding, 16px row gaps) at every window height, so on a ~770px-tall window it ran ~65px past the bottom and the hero scrolled off the top. It now tightens its vertical rhythm with the window height instead of scrolling: spacing comes from --dash-* vars on .dashboard-view, stepped down at max-height 900px and 760px. At <=900px the knowledge stats put their icon beside the value, the h1, stage numbers and smart-folder chips shrink a step; at <=760px the hero summary line (which repeats the pipeline and smart-folder cards) is hidden. The pipeline connector rail now tracks the variable inner padding. Scrolling remains the fallback for windows too short for even the tight tier. Measured at 1292px wide with live knowledge stats: fits with no scroll at 1000, 900, 800, 770, 720 and 680px tall (previously overflowed at <=900px).
The first pass only shrank the board on short windows; on a window taller than its content the cards kept their natural height and the spare space pooled at the bottom, with the knowledge stats hugging the top of their card. Now, at the lg layout, the board is a column that fills the content area: the hero keeps its natural height and the two card rows plus the knowledge card each grow from their natural height by an equal share of the spare space (`grow`, not `flex-1`, whose zero basis gave the smallest row all of it). Inside, cards centre their content: pipeline stages (the connector rail now rides on the stage row rather than the box padding), quick-action tiles and the knowledge stats. The 2:1 columns use minmax(0, …) so a long file name in Recent activity truncates instead of widening its column and knocking the two rows' gutters out of line. The tight density tier now starts at 800px. Measured at 1463px wide: no overflow and no bottom gap at 728-1200px tall (and 1280x720, 1100x800); 700px needs 8px of scroll.
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.
Problem
On a typical laptop window (~770px tall) the dashboard ran ~65px past the bottom: the hero scrolled off the top and you had to scroll to see everything. It used the same desktop spacing at every window height.
Fix
The dashboard now tightens its spacing as the window gets shorter instead of scrolling.
--dash-*CSS variables on.dashboard-view, stepped down atmax-height: 900pxand760px(src/renderer/styles.css).smwidth breakpoint nothing changes.Verified
Measured in the running app at 1292px wide with live knowledge stats:
Dashboard and KnowledgeStatsCard tests (146) pass; lint and format are clean.