Stop card and row padding from stacking in the Updates panel - #2340
Merged
Conversation
The provider rows in a machine card are ResourceRows with a plain py-2 and no first:/last: reset, so their 8px stacked on the SettingsSection card's own py-3.5: 22px above the first row and below the last row, while the bb app row (an UpdatesRow with first:pt-0 last:pb-0) sat at 14px. A card that mixed both came out lopsided, and provider-only cards were padded at both ends. Share one ROW_SPACING constant between UpdatesRow and the three ResourceRow callers so every row in a card has the same pitch and the same edge reset. Co-Authored-By: Claude <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.
What was wrong
The machine cards in Settings → Updates had too much space above the first row and below the last row.
SettingsSectionpads the card body withpy-3.5(14px). The provider rows areResourceRows with a plainclassName="py-2"and nofirst:pt-0 last:pb-0reset, so the row's 8px stacked on the card's 14px: 22px at each end. Thebb approw is anUpdatesRow, which has the reset, so it sat at 14px. A card that mixed the two came out lopsided (14px top, 22px bottom), and provider-only cards were over-padded at both ends.What changed
apps/app/src/components/settings/UpdatesSettingsSection.tsxonly. One sharedROW_SPACING = "py-2 first:pt-0 last:pb-0"constant sits besideROW_GRID.UpdatesRowand the threeResourceRowcallers (BbDaemonUpdateRow,ProviderCliCheckRow,MachineUpdatesRows) use it.UpdatesRowmoves frompy-2.5topy-2, so every row in a card has the same 45px pitch. No wire, CLI, or doc changes.How you verified
pnpm exec turbo run typecheck --filter=@bb/apppasses.UpdatesSettingsSection.test.tsxpasses (27 tests).Measured in Ladle (
settings--updates--multi-machine), card border to row icon, before → after:The 20px "after" value is to the 24px leading icon centered in a 28px row; the edge to the row box is 15px on every card.