Adjust feature card layout to show full description text

- Reduce icon and glow sizes for more content space
- Use smaller font sizes for title, subtitle, and description
- Add fixedSize modifier to prevent description truncation
- Use minLength spacers instead of flexible spacers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Trey t
2025-12-02 13:26:41 -06:00
parent 2f89f36f86
commit b19162a8ac

View File

@@ -122,8 +122,8 @@ struct FeatureCard: View {
@State private var appeared = false @State private var appeared = false
var body: some View { var body: some View {
VStack(spacing: AppSpacing.xl) { VStack(spacing: AppSpacing.lg) {
Spacer() Spacer(minLength: AppSpacing.md)
// Large icon with gradient background // Large icon with gradient background
ZStack { ZStack {
@@ -133,11 +133,11 @@ struct FeatureCard: View {
RadialGradient( RadialGradient(
colors: [feature.gradient[0].opacity(0.3), Color.clear], colors: [feature.gradient[0].opacity(0.3), Color.clear],
center: .center, center: .center,
startRadius: 40, startRadius: 30,
endRadius: 100 endRadius: 80
) )
) )
.frame(width: 200, height: 200) .frame(width: 160, height: 160)
.scaleEffect(appeared ? 1 : 0.8) .scaleEffect(appeared ? 1 : 0.8)
.opacity(appeared ? 1 : 0) .opacity(appeared ? 1 : 0)
@@ -150,26 +150,26 @@ struct FeatureCard: View {
endPoint: .bottomTrailing endPoint: .bottomTrailing
) )
) )
.frame(width: 120, height: 120) .frame(width: 100, height: 100)
.shadow(color: feature.gradient[0].opacity(0.5), radius: 20, y: 10) .shadow(color: feature.gradient[0].opacity(0.5), radius: 15, y: 8)
Image(systemName: feature.icon) Image(systemName: feature.icon)
.font(.system(size: 50)) .font(.system(size: 44))
.foregroundColor(.white) .foregroundColor(.white)
} }
.scaleEffect(appeared ? 1 : 0.5) .scaleEffect(appeared ? 1 : 0.5)
.animation(.spring(response: 0.5, dampingFraction: 0.7), value: appeared) .animation(.spring(response: 0.5, dampingFraction: 0.7), value: appeared)
// Text content // Text content
VStack(spacing: AppSpacing.md) { VStack(spacing: AppSpacing.sm) {
Text(feature.title) Text(feature.title)
.font(.title) .font(.title2)
.fontWeight(.bold) .fontWeight(.bold)
.foregroundColor(Color.appTextPrimary) .foregroundColor(Color.appTextPrimary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
Text(feature.subtitle) Text(feature.subtitle)
.font(.title3) .font(.subheadline)
.fontWeight(.medium) .fontWeight(.medium)
.foregroundStyle( .foregroundStyle(
LinearGradient( LinearGradient(
@@ -181,11 +181,12 @@ struct FeatureCard: View {
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
Text(feature.description) Text(feature.description)
.font(.body) .font(.subheadline)
.foregroundColor(Color.appTextSecondary) .foregroundColor(Color.appTextSecondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.lineSpacing(4) .lineSpacing(3)
.padding(.horizontal, AppSpacing.md) .padding(.horizontal, AppSpacing.sm)
.fixedSize(horizontal: false, vertical: true)
} }
.opacity(appeared ? 1 : 0) .opacity(appeared ? 1 : 0)
.offset(y: appeared ? 0 : 20) .offset(y: appeared ? 0 : 20)
@@ -194,7 +195,7 @@ struct FeatureCard: View {
// Stat highlight // Stat highlight
VStack(spacing: AppSpacing.xs) { VStack(spacing: AppSpacing.xs) {
Text(feature.statNumber) Text(feature.statNumber)
.font(.system(size: 36, weight: .bold, design: .rounded)) .font(.system(size: 32, weight: .bold, design: .rounded))
.foregroundStyle( .foregroundStyle(
LinearGradient( LinearGradient(
colors: feature.gradient, colors: feature.gradient,
@@ -208,7 +209,8 @@ struct FeatureCard: View {
.foregroundColor(Color.appTextSecondary) .foregroundColor(Color.appTextSecondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
} }
.padding(AppSpacing.lg) .padding(.horizontal, AppSpacing.lg)
.padding(.vertical, AppSpacing.md)
.background( .background(
RoundedRectangle(cornerRadius: AppRadius.lg) RoundedRectangle(cornerRadius: AppRadius.lg)
.fill(Color.appBackgroundSecondary) .fill(Color.appBackgroundSecondary)
@@ -216,7 +218,7 @@ struct FeatureCard: View {
.opacity(appeared ? 1 : 0) .opacity(appeared ? 1 : 0)
.animation(.easeOut(duration: 0.4).delay(0.4), value: appeared) .animation(.easeOut(duration: 0.4).delay(0.4), value: appeared)
Spacer() Spacer(minLength: AppSpacing.md)
} }
.onChange(of: isActive) { _, newValue in .onChange(of: isActive) { _, newValue in
if newValue { if newValue {