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

Fix hero card content clipping: flex height, simpler team rows, smaller title

Browse Source 
Title was clipping off the left edge ("ston Astros" instead of "Houston
Astros"). Root cause was too much content in a fixed-height card.

Fixed by: using minHeight instead of fixed height so the card expands
to fit content, simplified team rows to just logo + code + record +
score (removed full team name and standings summary since the title
already shows them), reduced title from 44pt to 36pt, added .clipped()
to hero image, added .fixedSize(horizontal: false, vertical: true).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
2026-04-12 17:01:58 -05:00
parent 310d857c7f
commit f59df9b04d
1 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
mlbTVOS/Views/FeaturedGameCard.swift
View File

@@ -37,24 +37,33 @@ struct FeaturedGameCard: View {
VStack(alignment: .leading, spacing: contentSpacing) { VStack(alignment: .leading, spacing: contentSpacing) {
headerRow headerRow
HStack(alignment: .bottom, spacing: 28) { // Team rows — simple, no side panel
VStack(alignment: .leading, spacing: 16) { VStack(alignment: .leading, spacing: 12) {
scoreboardRow(team: game.awayTeam, isLeading: isWinning(away: true)) scoreboardRow(team: game.awayTeam, isLeading: isWinning(away: true))
scoreboardRow(team: game.homeTeam, isLeading: isWinning(away: false)) scoreboardRow(team: game.homeTeam, isLeading: isWinning(away: false))
}
.frame(maxWidth: .infinity, alignment: .leading)
detailPanel
.frame(width: detailPanelWidth, alignment: .trailing)
} }
insightStrip // Live situation inline (if live)
if game.isLive, let linescore = game.linescore {
HStack(spacing: 20) {
if let inning = game.currentInningDisplay {
Text(inning)
.font(inningFont)
.foregroundStyle(DS.Colors.live)
}
DiamondView(
balls: linescore.balls ?? 0,
strikes: linescore.strikes ?? 0,
outs: linescore.outs ?? 0
)
}
}
} }
.padding(.horizontal, heroPadH) .padding(.horizontal, heroPadH)
.padding(.vertical, heroPadV) .padding(.vertical, heroPadV)
} }
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity, minHeight: heroHeight)
.frame(height: heroHeight) .fixedSize(horizontal: false, vertical: true)
.clipShape(RoundedRectangle(cornerRadius: heroRadius, style: .continuous)) .clipShape(RoundedRectangle(cornerRadius: heroRadius, style: .continuous))
.overlay( .overlay(
RoundedRectangle(cornerRadius: heroRadius, style: .continuous) RoundedRectangle(cornerRadius: heroRadius, style: .continuous)
@@ -93,6 +102,7 @@ struct FeaturedGameCard: View {
heroImage heroImage
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)
.clipped()
.overlay { .overlay {
LinearGradient( LinearGradient(
colors: [ colors: [
@@ -161,31 +171,18 @@ struct FeaturedGameCard: View {
} }
private func scoreboardRow(team: TeamInfo, isLeading: Bool) -> some View { private func scoreboardRow(team: TeamInfo, isLeading: Bool) -> some View {
HStack(spacing: 16) { HStack(spacing: 14) {
TeamLogoView(team: team, size: logoSize) TeamLogoView(team: team, size: logoSize)
VStack(alignment: .leading, spacing: 5) { VStack(alignment: .leading, spacing: 3) {
Text(team.code) Text(team.code)
.font(codeFont) .font(codeFont)
.foregroundStyle(.white) .foregroundStyle(.white)
Text(team.displayName) if let record = team.record {
.font(nameFont) Text(record)
.foregroundStyle(DS.Colors.onDarkSecondary) .font(metadataFont)
.foregroundStyle(DS.Colors.onDarkTertiary)
HStack(spacing: 10) {
if let record = team.record {
Text(record)
.font(metadataFont)
.foregroundStyle(DS.Colors.onDarkSecondary)
}
if let summary = team.standingSummary {
Text(summary)
.font(metadataFont)
.foregroundStyle(DS.Colors.onDarkTertiary)
.lineLimit(1)
}
} }
} }
@@ -467,10 +464,10 @@ struct FeaturedGameCard: View {
} }
#if os(tvOS) #if os(tvOS)
private var heroHeight: CGFloat { 500 } private var heroHeight: CGFloat { 460 }
private var heroRadius: CGFloat { 34 } private var heroRadius: CGFloat { 34 }
private var heroPadH: CGFloat { 40 } private var heroPadH: CGFloat { 44 }
private var heroPadV: CGFloat { 36 } private var heroPadV: CGFloat { 32 }
private var detailPanelWidth: CGFloat { 300 } private var detailPanelWidth: CGFloat { 300 }
private var detailPanelPad: CGFloat { 26 } private var detailPanelPad: CGFloat { 26 }
private var detailPanelWidthCompact: CGFloat { 320 } private var detailPanelWidthCompact: CGFloat { 320 }
@@ -478,12 +475,13 @@ struct FeaturedGameCard: View {
private var logoSize: CGFloat { 56 } private var logoSize: CGFloat { 56 }
private var rowPadH: CGFloat { 22 } private var rowPadH: CGFloat { 22 }
private var rowPadV: CGFloat { 18 } private var rowPadV: CGFloat { 18 }
private var titleFont: Font { .system(size: 44, weight: .black, design: .rounded) } private var titleFont: Font { .system(size: 36, weight: .black, design: .rounded) }
private var labelFont: Font { .system(size: 15, weight: .black, design: .rounded) } private var labelFont: Font { .system(size: 15, weight: .black, design: .rounded) }
private var codeFont: Font { .system(size: 22, weight: .black, design: .rounded) } private var codeFont: Font { .system(size: 22, weight: .black, design: .rounded) }
private var nameFont: Font { .system(size: 28, weight: .bold, design: .rounded) } private var nameFont: Font { .system(size: 28, weight: .bold, design: .rounded) }
private var metadataFont: Font { .system(size: 18, weight: .bold, design: .rounded) } private var metadataFont: Font { .system(size: 18, weight: .bold, design: .rounded) }
private var scoreFont: Font { .system(size: 60, weight: .black, design: .rounded).monospacedDigit() } private var scoreFont: Font { .system(size: 60, weight: .black, design: .rounded).monospacedDigit() }
private var inningFont: Font { .system(size: 24, weight: .bold, design: .rounded) }
private var badgeFont: Font { .system(size: 13, weight: .black, design: .rounded) } private var badgeFont: Font { .system(size: 13, weight: .black, design: .rounded) }
private var summaryFont: Font { .system(size: 16, weight: .bold, design: .rounded) } private var summaryFont: Font { .system(size: 16, weight: .bold, design: .rounded) }
private var panelLabelFont: Font { .system(size: 14, weight: .black, design: .rounded) } private var panelLabelFont: Font { .system(size: 14, weight: .black, design: .rounded) }
@@ -509,6 +507,7 @@ struct FeaturedGameCard: View {
private var nameFont: Font { .system(size: 18, weight: .bold, design: .rounded) } private var nameFont: Font { .system(size: 18, weight: .bold, design: .rounded) }
private var metadataFont: Font { .system(size: 12, weight: .bold, design: .rounded) } private var metadataFont: Font { .system(size: 12, weight: .bold, design: .rounded) }
private var scoreFont: Font { .system(size: 32, weight: .black, design: .rounded).monospacedDigit() } private var scoreFont: Font { .system(size: 32, weight: .black, design: .rounded).monospacedDigit() }
private var inningFont: Font { .system(size: 16, weight: .bold, design: .rounded) }
private var badgeFont: Font { .system(size: 10, weight: .black, design: .rounded) } private var badgeFont: Font { .system(size: 10, weight: .black, design: .rounded) }
private var summaryFont: Font { .system(size: 11, weight: .bold, design: .rounded) } private var summaryFont: Font { .system(size: 11, weight: .bold, design: .rounded) }
private var panelLabelFont: Font { .system(size: 10, weight: .black, design: .rounded) } private var panelLabelFont: Font { .system(size: 10, weight: .black, design: .rounded) }