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