fix(cards): drop the award action and match the glass bar sizing on feed cards - #6394
Open
tsahimatsliah wants to merge 8 commits into
Open
fix(cards): drop the award action and match the glass bar sizing on feed cards#6394tsahimatsliah wants to merge 8 commits into
tsahimatsliah wants to merge 8 commits into
Conversation
…e on Impressions take the award slot on the right of the engagement bar, so the two never coexist. Awards were only dropped below laptop; now they are gone on every viewport for grid, list and signal cards, in both engagement bar variants. With the card_impressions flag off, cards are unchanged. Also fixes the award button rendering for logged out visitors: `user?.id === post?.author?.id` compared undefined to undefined on authorless posts, so `isSameUser` was true and the button appeared on exactly the cards where an award is impossible. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The impressions counter sat 5px from the card edge on the default bar, so the number read as touching the rounded corner. Adopt the sizing the glass pill already uses (FeedCardGlassActions, #6260): XSmall buttons, 16px icons, `!pl-0.5 pr-0.5` around counters and asymmetric `pl-1 pr-2.5` row padding, which gives the two bars identical internal geometry — first icon 9px in, trailing number 13px from the edge, verified at the 272px min card width. Drops the mobile-only `typo-caption1` counter: the count is now footnote everywhere, matching the glass bar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
tsahimatsliah
changed the title
The v2 bar pushed its trailing action up to 41px outside the card on the narrowest grid track. Buttons never shrink here (global flex-shrink: 0), so six actions plus counters have to fit on intrinsic widths alone, and at Small size (32px buttons, 20px icons) they need up to 288px inside a 262px row. Two changes close the gap: - new `tight` CardAction density (XSmall buttons, 16px icons), used by the feed bar only, so v2 matches the v1 and glass bars. - no `gap` on the `feedCard` CardActionBar layout: `justify-between` already spreads the actions when there is slack, and the gap only added 20px the card could not give back. Both default bars now sit at a 36px row height (`py-1.5` around the h-6 buttons) so shrinking the actions doesn't make the bar read as cramped. Verified at 272px and 320px with 36·3·52.4K, 100·80·100K, 200·80·234.5K and 10K·999·1.2M: nothing escapes its container in any combination. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Renders v1 / v2 / glass feed bars at 320px and the 272px min card width across four stat loads, so the width contract stays checkable. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…ensity The /dev/buttons width-contract vignettes documented `density="compact"` as the grid-card rule, which overflows the 272px MIN once a card carries six actions with counters. They now use `tight`, matching what the feed ships. Co-Authored-By: Claude Opus 5 <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.
Three fixes to the feed card action bar.
1. Impressions and awards competed for the same slot. The gate was
showAwardAction && (!impressionsEnabled || isLaptop), so withcard_impressionson the award action was only dropped below laptop and still rendered on desktop next to the impressions stat. Impressions replace that button, so awards are now hidden on every viewport for all feed card variants (grid, list, signal) in both engagement bar variants.2. The award button leaked onto authorless cards for logged out visitors.
isSameUserwasuser?.id === post?.author?.id— for an anonymous visitor on a post with no author that comparesundefinedtoundefinedand evaluates totrue, so the button rendered on exactly the cards where an award is impossible, and stayed hidden on the ones that do have an author. Now requires a real logged in id.3. The impressions counter sat 5px from the card edge, reading as if it touched the rounded corner. The default bar now uses the sizing the floating glass pill already had since #6260: XSmall buttons, 16px icons,
!pl-0.5 pr-0.5around counters, and asymmetricpl-1 pr-2.5row padding. The two bars now have identical internal geometry — first icon 9px in, trailing number 13px from the edge. The mobile-onlytypo-caption1counter is gone; counts are footnote everywhere, like the glass bar.Measured in Storybook across 320px and the 272px min card width, with 36·3·52.4K, 100·80·100K, 200·80·234.5K and 10K·999·1.2M: no row overflow and no overlap in any combination. Tightest case (272px, 200·80·234.5K) keeps a 4px gap between adjacent actions, and the trailing number stays a constant 11px from the card edge regardless of counts.
With the
card_impressionsflag off, feed cards keep the award action exactly as onmain; the sizing change applies either way. The award action on the post page, reader rail and focus card is untouched.Tests
ActionButtons.spec.tsx— both engagement bar variants x grid/list/signal: award absent and impressions present when the flag is on, award present when it is off. 6 of the 12 cases fail against the previous gate.PostAwardAction.spec.tsx— both variants: hidden for logged out and logged in users on authorless posts, rendered on your own post and when the author can be awarded.🤖 Generated with Claude Code
Preview domain
https://claude-award-button-visibility-c.preview.app.daily.dev