From a292b5c20cad2e536867366e15c159c5dbb7faaf Mon Sep 17 00:00:00 2001
From: Trey t <treytartt@fastmail.com>
Date: Sun, 11 Jan 2026 10:29:14 -0600
Subject: [PATCH] fix: center Quick Start bottom row with consistent button
 sizing

Use GeometryReader to calculate button width as 1/4 of available space,
ensuring all buttons have the same size. Bottom row (MLS, WNBA, NWSL)
is now centered with WNBA in the middle.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 SportsTime/Features/Home/Views/HomeView.swift | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/SportsTime/Features/Home/Views/HomeView.swift b/SportsTime/Features/Home/Views/HomeView.swift
index 65cc9a9..0d1ba66 100644
--- a/SportsTime/Features/Home/Views/HomeView.swift
+++ b/SportsTime/Features/Home/Views/HomeView.swift
@@ -177,24 +177,43 @@ struct HomeView: View {
                 .font(.title2)
                 .foregroundStyle(Theme.textPrimary(colorScheme))
 
-            VStack(spacing: Theme.Spacing.md) {
-                ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
-                    HStack(spacing: Theme.Spacing.sm) {
-                        ForEach(row) { sport in
-                            QuickSportButton(sport: sport) {
-                                selectedSport = sport
-                                showNewTrip = true
+            GeometryReader { geometry in
+                let spacing = Theme.Spacing.sm
+                let buttonWidth = (geometry.size.width - 3 * spacing) / 4
+
+                VStack(spacing: Theme.Spacing.md) {
+                    ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
+                        if row.count == 4 {
+                            // Full row - evenly distributed
+                            HStack(spacing: spacing) {
+                                ForEach(row) { sport in
+                                    QuickSportButton(sport: sport) {
+                                        selectedSport = sport
+                                        showNewTrip = true
+                                    }
+                                    .frame(width: buttonWidth)
+                                }
                             }
-                        }
-                        // Fill remaining space if row has fewer than 4 items
-                        if row.count < 4 {
-                            ForEach(0..<(4 - row.count), id: \.self) { _ in
-                                Color.clear.frame(maxWidth: .infinity)
+                        } else {
+                            // Partial row - centered with same button width and spacing
+                            HStack {
+                                Spacer()
+                                HStack(spacing: spacing) {
+                                    ForEach(row) { sport in
+                                        QuickSportButton(sport: sport) {
+                                            selectedSport = sport
+                                            showNewTrip = true
+                                        }
+                                        .frame(width: buttonWidth)
+                                    }
+                                }
+                                Spacer()
                             }
                         }
                     }
                 }
             }
+            .frame(height: 180) // Approximate height for 2 rows
             .padding(.horizontal, Theme.Spacing.md)
             .padding(.vertical, Theme.Spacing.md)
             .background(Theme.cardBackground(colorScheme))