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

@@ -177,24 +177,43 @@ struct HomeView: View {
                 .font(.title2)
                 .foregroundStyle(Theme.textPrimary(colorScheme))
 
-            VStack(spacing: Theme.Spacing.md) {
+            GeometryReader { geometry in
-                ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
+                let spacing = Theme.Spacing.sm
-                    HStack(spacing: Theme.Spacing.sm) {
+                let buttonWidth = (geometry.size.width - 3 * spacing) / 4
-                        ForEach(row) { sport in
+
-                            QuickSportButton(sport: sport) {
+                VStack(spacing: Theme.Spacing.md) {
-                                selectedSport = sport
+                    ForEach(Array(rows.enumerated()), id: \.offset) { _, row in
-                                showNewTrip = true
+                        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)
+                                }
                             }
-                        }
+                        } else {
-                        // Fill remaining space if row has fewer than 4 items
+                            // Partial row - centered with same button width and spacing
-                        if row.count < 4 {
+                            HStack {
-                            ForEach(0..<(4 - row.count), id: \.self) { _ in
+                                Spacer()
-                                Color.clear.frame(maxWidth: .infinity)
+                                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))