Fix forecast card rows not filling card width on storefront#5034
Merged
Conversation
PercentageForecastCard and NumericForecastCard had a bare `relative` root with no width. That is invisible in most layouts, where a block element fills its parent, but both consumer card shells lay content out as `flex flex-col items-center` — and in a column flex container, align-items governs the horizontal axis, so the cards sized to fit-content instead of stretching. The option rows collapsed to the widest label. The feed and the similar-questions sidebar each worked around this with a `<div className="w-full">` wrapper; the storefront card was the one call site without one, so it was the only place the bug was visible. Fix the roots instead of adding a third wrapper — their siblings DateForecastCard and TimeSeriesChart, and their own child ForecastCardWrapper, already declare w-full. This covers multiple choice, binary groups, numeric and discrete groups, and date groups at once. Also pass buttonVariant="minimal" on the storefront card: it is fully covered by an absolute z-100 Link overlay, so the "N others" chevron button underneath could never be clicked. The feed already passes minimal for the same reason. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough
ChangesGroup forecast card presentation
Estimated code review effort: 1 (Trivial) | ~5 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
aseckin
marked this pull request as ready for review
July 16, 2026 07:14
Contributor
Cleanup: Preview Environment RemovedThe preview environment for this PR has been destroyed.
Cleanup triggered by PR close at 2026-07-17T13:05:17Z |
ncarazon
approved these changes
Jul 17, 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.
(ss of the problem)
Problem
On the storefront, Multiple Choice card option rows render narrower than the card, leaving dead space on the right. The same cards in the feed look correct.
Root cause
PercentageForecastCardandNumericForecastCardhad a barerelativeroot with no width. That's invisible in most layouts, where a block element fills its parent — but both consumer card shells lay content out asflex flex-col items-center, and in a column flex containeralign-itemsgoverns the horizontal axis. So the cards sized tofit-contentand the rows collapsed to the widest label.The feed and the similar-questions sidebar each worked around this with a
<div className="w-full">wrapper. The storefront card was the one call site without one, so it was the only place the bug was visible.Fix
Add
w-fullto the two roots rather than a third copy of the wrapper. These two were the outliers — their siblingsDateForecastCardandTimeSeriesChart, and their own childForecastCardWrapper, already declarew-full. This covers multiple choice, binary groups, numeric/discrete groups and date groups at once (all of them had the bug on the storefront; MC is just what got reported).Also passes
buttonVariant="minimal"on the storefront card: it's fully covered by anabsolute z-100Link overlay, so the "N others" chevron button underneath could never be clicked. The feed already passesminimalfor this reason.Summary by CodeRabbit