Repository navigation
fix(ui): align header widgets to one height and baseline - #97
Merged
Merged
Conversation
Header tiles took their content's height and the header row centred them, so a tile with a bar under its value (Memory, Disk) sat higher than the others and its label and value no longer lined up with the row's. Every header tile is now 56 px high with its content centred, and the bar sits on the tile's bottom edge instead of adding height, so labels and values share one line across the header. Board tiles are unchanged.
… its height Address review: a fixed 56 px tile broke the overflow menu's Menu.Item layout, overflowed the 55 px header row and its focus ring, and clipped large text. Instead every header tile keeps the same 4 px strip below its value, holding the bar where a tile has one, so tiles are equal in height in flow. The header stories now check that labels and values share one line, and a mixed-tile story covers the case that was misaligned.
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.
Header tiles took their content's height and the header row centred them, so a tile with a bar under its value (Memory, Disk) sat higher than the others and its label and value no longer lined up.
Every header tile now keeps the same 4 px strip below its value, holding the bar where a tile has one, so all tiles are the same height in normal flow and line up. Board tiles are unchanged. The header stories now check that labels and values share one line (±1 px), and a new MixedAlignment story places tiles with and without bars side by side; the check fails on the old code.