admin/Sportstime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: center Quick Start bottom row with consistent button sizing

Browse Source 
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>
This commit is contained in:
Trey t
2026-01-11 10:29:14 -06:00
parent 2d48f1411a
commit a292b5c20c
1 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
SportsTime/Features/Home/Views/HomeView.swift
View File

@@ -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))