fix(webkit): let item content fill the row and keep actions at their own width - #841
Open
gabriel-lisboa-azion wants to merge 2 commits into
Open
fix(webkit): let item content fill the row and keep actions at their own width#841gabriel-lisboa-azion wants to merge 2 commits into
gabriel-lisboa-azion wants to merge 2 commits into
Conversation
…own width An item row could not express "content grows, actions hold": whichever side had more text won. ItemContent lacked `min-w-0`, so a flex item's default `min-width: auto` refused to shrink below its text and a long title pushed the row wider instead of truncating; ItemActions could shrink, so the trailing buttons compressed when the content grew. ItemContent now claims the row (`w-full min-w-0`) and a SECOND content column still sizes to its own text (`[&+[data-slot=item-content]]:w-auto` beside the existing `flex-none`). ItemActions holds its natural width (`w-fit shrink-0`). Also drops ItemContent's internal `gap-[var(--spacing-xxs)]`, which is a visible density change and not part of the width fix: neither ItemTitle nor ItemDescription carries vertical spacing, so title and description now sit flush on their line-height and a consumer that wants them separated adds the spacing. Flagged for review in the PR — it can be reverted independently of the widths.
gabriel-lisboa-azion
force-pushed
the
fix/item-fill-and-actions-width
branch
from
July 31, 2026 01:08
cf1b648 to
8bbbfb2
Compare
herbert-julio-azion
approved these changes
Jul 31, 2026
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
2 participants
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
Two sub-components of
Itemstop fighting over the row's width — plus one density change that is called out separately below.item-content.vuemin-w-0— a flex item's defaultmin-width: autorefuses to shrink below its content, so a long title or aline-clampdescription pushed the row wider instead of truncating. This is what makes truncation inside an item possible at all.w-full— the column claims the row when it is the only content.[&+[data-slot=item-content]]:w-autopairs with the existingflex-noneso a second content column still sizes to its own text instead of inheritingw-full.item-actions.vueshrink-0+w-fitkeeps the trailing cluster at its natural width, so buttons no longer compress (or wrap) when the content column grows.Together: content grows, actions hold — the invariant every console list row needs and the one the previous classes could not express, since whichever side had more text won.
gapitem-content.vuealso loses its internalgap-[var(--spacing-xxs)]. That is a visible density change, not part of the width fix, and it deserves its own decision:ItemTitle(flex w-fit items-center gap-… text-body-sm) norItemDescription(line-clamp-2 text-body-sm) carries vertical spacing, so title and description now sit flush, separated only by line-height.Reverting is a one-line change independent of everything else in this PR — say the word and I will drop it.
Note
Visible, so the
linux/baselines are regenerated on this branch. The expected diff scope is item / item-group / item-list stories plus components that compose an item row.