fix(cards): drop the award action and match the glass bar sizing on feed cards

[tsahimatsliah]

Three fixes to the feed card action bar.

1. Impressions and awards competed for the same slot. The gate was showAwardAction && (!impressionsEnabled || isLaptop), so with card_impressions on 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. isSameUser was user?.id === post?.author?.id — for an anonymous visitor on a post with no author that compares undefined to undefined and evaluates to true, so the button rendered on exactly the cards where an award is impossible. Logged out on an authored post was already correct (useCanAwardUser returns false without a sending user); a spec now pins that so it's clear which mechanism owns it.

3. The impressions counter sat 5px from the card edge, reading as if it touched the rounded corner. Both default bars now use the sizing the floating glass pill has had since #6260: XSmall buttons, 16px icons, !pl-0.5 pr-0.5 around counters, and asymmetric pl-1 pr-2.5 row padding, with py-1.5 holding the row at its previous 36px height. The trailing number now sits 13px from the edge, and the award action takes the same sizing instead of hardcoding ButtonSize.Small.

Getting there needed two supporting changes: a tight CardAction density (compact is untouched, so comments, the reader bar, daily votes and hot takes are unaffected), and dropping gap-1 from the feedCard CardActionBar layout — with justify-between a gap is redundant when there is slack and pure added width when there isn't. Without both, the v2 bar pushed its trailing action up to 41px outside the 272px card, because buttons never shrink (global flex-shrink: 0) and six actions with counters needed up to 288px in a 262px row.

With the card_impressions flag off, feed cards keep the award action exactly as on main; the sizing change applies either way. The award action on the post page, reader rail and focus card is untouched.

Measurements

Storybook Components/Cards/ActionBarAlignment renders every bar at 320px and the 272px min card width, across 36·3·52.4K, 100·80·100K, 200·80·234.5K and 10K·999·1.2M — including the control cohort, where the award action is present with its own counter.

bar @272px	actions	button height	escapes card	worst gap
v1, impressions on	6	24px	never (11px inside)	4px
v2, impressions on	6	24px	never (was 41px outside)	1px
v1, control (award)	6	24px	never (11px inside)	7px
v2, control (award)	6	24px	never (11px inside)	3px
glass	6	24px	never (11px inside pill)	1px

Tests

• ActionButtons.spec.tsx — both engagement bar variants x both sides of the laptop breakpoint x grid/list/signal: award absent and impressions present when the flag is on, award present when it is off.
• PostAwardAction.spec.tsx — both variants: visibility across all four auth/author quadrants, plus the button size and the awarded-image size.

🤖 Generated with Claude Code

Preview domain

https://claude-award-button-visibility-c.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Aug 4, 2026 10:39am
storybook	Building	Preview	Aug 4, 2026 10:39am

[tsahimatsliah]

Summary

Three independently sensible fixes, and the two logic ones are correct:

• Award vs impressions gate. Dropping || isLaptop is right, and it's fixed in both ActionButtons.tsx and ActionButtons.v2.tsx so the two bars agree.
• isSameUser. The undefined === undefined diagnosis holds: if (!canAward && !isSameUser) return null, so an anonymous visitor on an authorless post fell through to true and rendered the button. I traced the other quadrants — logged-in + authorless was already false, and logged-out on an authored post is governed by useCanAwardUser, which returns false whenever there's no sendingUser. So the fix is narrow and touches exactly the broken case, in both variants. (Small correction to the description: logged-out visitors were already not seeing it on authored posts; that half wasn't broken.)
• CardActionBar gap removal is contained — layout="feedCard" has exactly one consumer, ActionButtons.v2.

The sizing change is where I'd push back, on one specific case.

Blocking

The control cohort — card_impressions off — is the one layout that wasn't measured, and it's plausibly the widest. With the flag off, the award action still renders, and PostAwardActionV1 hardcodes size={ButtonSize.Small} — it does not take buttonSize from variantConfig. So a control feed card now shows five XSmall buttons next to one Small one. Three consequences:

1. Width. The measurements in the description ("tightest case 272px … 4px gap") are for the impressions-on row, which has five actions. Control has six, one of them at the old, larger size, and it can carry its own numAwards counter. Since buttons never shrink (flex-shrink: 0), the surplus becomes overflow rather than compression. The new Storybook page only sets card_impressions: true in all six rows, so this case isn't covered there either.
2. Alignment. "The two bars now have identical internal geometry" isn't true in control — the award button is a size taller and wider than its neighbours.
3. Icon size. The un-awarded glyph takes the passed iconSize (now 16px), but the awarded state is pinned to iconSizeToClassName[IconSize.XSmall] (20px), so the same button changes size when a post gets awarded. Its counter also keeps labelClassName="!pl-[1px]" rather than the new shared counterLabelClassName.

The fix looks small — thread buttonSize/density into PostAwardActionV1 the way v2 already does with density="tight", and drop the hardcoded XSmall on the awarded image. Either way, please add a card_impressions: false row to the alignment story and re-check 272px, since that's the cohort the sizing change ships to unconditionally.

Non-blocking

1. The useViewSize mock in ActionButtons.spec.tsx is now vestigial and pins one viewport. It's forced to true (laptop), which is the right regression case for the old gate — but with the gate gone, the test no longer proves viewport-independence, and a reintroduced isLaptop check would still pass. describe.each over [false, true] for the viewport, or dropping the mock entirely, would make the assertion match what the fix actually claims.

2. PostAwardAction.spec.tsx doesn't cover logged-out on an authored post — the other half of the description's claim. It's currently protected by useCanAwardUser rather than by this change, so a case pinning it would document which mechanism owns it.

3. Seven Merge branch 'main' commits. Not worth a round trip on its own, but the history is hard to read against the four real commits.

4. CI was still running when I reviewed (install_deps green, everything else pending) — worth a glance before merge, particularly lint_shared given the useViewSize/classNames import churn.

Verification

• Read the PR review guide and code-style rules
• Traced all four auth/author quadrants through isSameUser + useCanAwardUser in both variants
• Checked every consumer of layout="feedCard" before accepting the gap removal
• Compared PostAwardActionV1's sizing against the new variantConfig values
• Read both new specs and the alignment story's feature overrides
• Not measured on the preview — the 272px control-cohort case above is the specific thing I could not rule out from the diff
• CI incomplete at review time

Verdict

Comment — the control-cohort layout needs either a measurement or the size threaded through before merge; everything else is optional.

Reviewed by AI.

[tsahimatsliah]

Review addressed in 48d03e8, and the branch is rebased onto main so the history is the six real commits with the merge commits gone.

Blocking — control cohort sizing. You were right that this was the unmeasured case. PostAwardActionV1 hardcoded ButtonSize.Small, so with card_impressions off a card showed five 24px buttons next to one 32px one. It now takes buttonSize/iconSize from the caller, defaulting to shared feed-action constants. The two follow-ons you spotted are fixed too: the awarded image follows iconSize instead of a pinned IconSize.XSmall (the button used to change size when a post got awarded), and the counter uses the shared label/counter classes rather than !pl-[1px]. v2 had the same pin — it now defaults to the tight density and derives the image size from it.

Blocking — story coverage. Two card_impressions: false rows at 272px, one per bar. The mock post carries an author matching the mocked boot user and a per-case numAwards, so the control rows render the award action with its counter — the widest layout on the page.

Measured across all four stat loads at the 272px min card width:

bar @272px	actions	button height	escapes card	worst gap
v1, impressions on	6	24px	never (11px inside)	4px
v2, impressions on	6	24px	never	1px
v1, control (award)	6	24px	never	7px
v2, control (award)	6	24px	never	3px
glass	6	24px	never (inside pill)	1px

Non-blocking 1 — viewport mock. ActionButtons.spec.tsx is now describe.each over [v2, laptop], 24 cases. A reintroduced isLaptop gate fails on the laptop half instead of passing on jsdom's unmatched-media-query default.

Non-blocking 2 — logged out on an authored post. Pinned in PostAwardAction.spec.tsx with a comment naming useCanAwardUser as the owner. I also corrected the PR description: that half was never broken.

Non-blocking 3 — merge commits. Rebased away.

Non-blocking 4 — CI. Green on the previous push; re-running now.

One extraction while I was in there: the counter classes and the two feed-action size constants live in cards/common/actionCounter.ts, imported by both bars and the award action, so they can't drift apart again.