Compare: align action chips and give them breathing room#164
Merged
Conversation
Several inline action chips landed flush against their neighbouring text — "Metric Switch", "Waterfall ", "HAR1 Upload", and the disclosure arrows on rows like "CPU time spent by category" — so visually it read as one crowded blob rather than a label with a separate action you could aim at. The page-x-ray metric column also had the awkward case where "Switch" stayed on the title line and "Only differences" wrapped underneath at a different left edge, which looked broken. Card titles become flex containers so inline chips sit at a consistent gap and centre-align with the heading instead of hugging its baseline. The chip-toggle, submit-smaller and Upload label each pick up a small left margin so they're never flush against preceding content, reset inside flex parents where gap does the work. The metric column header now stacks "Metric" on top of a flex row that holds Switch + Only differences together, so the chips wrap as a group and stay aligned with each other. A small negative left margin on that row pulls the buttons left by the width of their own border + padding so the visible text edge of "Switch" lines up with "URL"/"Date"/"Browser" in the rows below. Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com
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.
Several inline action chips landed flush against their neighbouring
text — "Metric Switch", "Waterfall ", "HAR1 Upload", and the
disclosure arrows on rows like "CPU time spent by category" — so
visually it read as one crowded blob rather than a label with a
separate action you could aim at. The page-x-ray metric column
also had the awkward case where "Switch" stayed on the title line
and "Only differences" wrapped underneath at a different left
edge, which looked broken.
Card titles become flex containers so inline chips sit at a
consistent gap and centre-align with the heading instead of
hugging its baseline. The chip-toggle, submit-smaller and Upload
label each pick up a small left margin so they're never flush
against preceding content, reset inside flex parents where gap
does the work.
The metric column header now stacks "Metric" on top of a flex row
that holds Switch + Only differences together, so the chips wrap
as a group and stay aligned with each other. A small negative
left margin on that row pulls the buttons left by the width of
their own border + padding so the visible text edge of "Switch"
lines up with "URL"/"Date"/"Browser" in the rows below.
Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com