From 83cca395cfba176f6c701333247de83d5833bbd6 Mon Sep 17 00:00:00 2001
From: Trey t <treytartt@fastmail.com>
Date: Sat, 28 Feb 2026 13:50:47 -0600
Subject: [PATCH] Fix feature card truncation and unequal sizing on
 subscription screens

Replace HStack layout with LazyVGrid for uniform card sizing, remove
lineLimit(1) to allow multiline subtitles, and add 1:1 aspect ratio
so all four feature cards are identical squares across all 12 themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Views/ReflectSubscriptionStoreView.swift  | 71 ++++++++++---------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/Shared/Views/ReflectSubscriptionStoreView.swift b/Shared/Views/ReflectSubscriptionStoreView.swift
index f5dcbd9..9b4ad8e 100644
--- a/Shared/Views/ReflectSubscriptionStoreView.swift
+++ b/Shared/Views/ReflectSubscriptionStoreView.swift
@@ -1976,40 +1976,41 @@ struct JournalPagesView: View {
 struct FeatureCardsGrid: View {
     let style: PaywallStyle
 
+    private let columns = [
+        GridItem(.flexible(), spacing: 12),
+        GridItem(.flexible(), spacing: 12)
+    ]
+
     var body: some View {
-        VStack(spacing: 12) {
-            HStack(spacing: 12) {
-                FeatureCard(
-                    icon: "chart.line.uptrend.xyaxis",
-                    title: "See Patterns",
-                    subtitle: "Month & year views",
-                    style: style,
-                    accentIndex: 0
-                )
-                FeatureCard(
-                    icon: "sparkles",
-                    title: "AI Insights",
-                    subtitle: "Understand your moods",
-                    style: style,
-                    accentIndex: 1
-                )
-            }
-            HStack(spacing: 12) {
-                FeatureCard(
-                    icon: "heart.circle",
-                    title: "Health Sync",
-                    subtitle: "Connect your data",
-                    style: style,
-                    accentIndex: 2
-                )
-                FeatureCard(
-                    icon: "rectangle.grid.2x2",
-                    title: "Widgets",
-                    subtitle: "Always visible",
-                    style: style,
-                    accentIndex: 3
-                )
-            }
+        LazyVGrid(columns: columns, spacing: 12) {
+            FeatureCard(
+                icon: "chart.line.uptrend.xyaxis",
+                title: "See Patterns",
+                subtitle: "Month & year views",
+                style: style,
+                accentIndex: 0
+            )
+            FeatureCard(
+                icon: "sparkles",
+                title: "AI Insights",
+                subtitle: "Understand your moods",
+                style: style,
+                accentIndex: 1
+            )
+            FeatureCard(
+                icon: "heart.circle",
+                title: "Health Sync",
+                subtitle: "Connect your data",
+                style: style,
+                accentIndex: 2
+            )
+            FeatureCard(
+                icon: "rectangle.grid.2x2",
+                title: "Widgets",
+                subtitle: "Always visible",
+                style: style,
+                accentIndex: 3
+            )
         }
     }
 }
@@ -2041,11 +2042,13 @@ struct FeatureCard: View {
                 Text(subtitle)
                     .font(.system(size: 11, weight: .medium))
                     .foregroundColor(subtitleColor)
-                    .lineLimit(1)
+                    .fixedSize(horizontal: false, vertical: true)
             }
+            Spacer(minLength: 0)
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding(14)
+        .aspectRatio(1, contentMode: .fill)
         .background(cardBackground)
     }