From 57ab3f9c3dff3a26e2f8620d6d1a0be421231161 Mon Sep 17 00:00:00 2001
From: Atakan Seckin <atakanseckin@Atakans-MacBook-Air-2.local>
Date: Thu, 16 Jul 2026 09:12:39 +0200
Subject: [PATCH] Fix forecast card rows not filling card width on storefront
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/app/(storefront)/components/homepage_post_card.tsx  | 6 +++++-
 .../group_forecast_card/numeric_forecast_card.tsx           | 5 ++++-
 .../group_forecast_card/percentage_forecast_card.tsx        | 5 ++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/front_end/src/app/(storefront)/components/homepage_post_card.tsx b/front_end/src/app/(storefront)/components/homepage_post_card.tsx
index e6764cd556..20998c3488 100644
--- a/front_end/src/app/(storefront)/components/homepage_post_card.tsx
+++ b/front_end/src/app/(storefront)/components/homepage_post_card.tsx
@@ -60,7 +60,11 @@ const HomepagePostCard: FC<Props> = ({ post, className }) => {
               )}
 
               {(isGroupOfQuestionsPost(post) || isMultipleChoicePost(post)) && (
-                <GroupForecastCard post={post} compact />
+                <GroupForecastCard
+                  post={post}
+                  compact
+                  buttonVariant="minimal"
+                />
               )}
             </HideCPProvider>
           </div>
diff --git a/front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx b/front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx
index b3fdb2e464..b630b5cd85 100644
--- a/front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx
+++ b/front_end/src/components/consumer_post_card/group_forecast_card/numeric_forecast_card.tsx
@@ -265,7 +265,10 @@ const NumericForecastCard: FC<Props> = ({
   return (
     <div
       ref={containerRef}
-      className={cn("relative", effectiveFillHeight && "flex flex-1 flex-col")}
+      className={cn(
+        "relative w-full",
+        effectiveFillHeight && "flex flex-1 flex-col"
+      )}
     >
       <ForecastCardWrapper
         otherItemsCount={hiddenCount}
diff --git a/front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx b/front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx
index 7081c7ac01..685ba4bf21 100644
--- a/front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx
+++ b/front_end/src/components/consumer_post_card/group_forecast_card/percentage_forecast_card.tsx
@@ -158,7 +158,10 @@ const PercentageForecastCard: FC<Props> = ({
   return (
     <div
       ref={containerRef}
-      className={cn("relative", effectiveFillHeight && "flex flex-1 flex-col")}
+      className={cn(
+        "relative w-full",
+        effectiveFillHeight && "flex flex-1 flex-col"
+      )}
     >
       <ForecastCardWrapper
         otherItemsCount={hiddenCount}