| name | responsive-layout |
| description | Audit and fix layout sizing across all Apple device sizes (iPhone SE to iPad Pro). Use when Marina says "looks wrong on iPhone", "fix the iPad layout", "text is truncated/cut off", "it's cramped on small screens", "audit the sizing", or a view breaks on a specific device. |
Audit and fix responsive layout issues in the specified view(s). If the user doesn't specify a view, ask which one.
Device Size Reference
- iPhone SE: 375×667 (smallest supported)
- iPhone 15: 393×852 (standard)
- iPhone 15 Pro Max: 430×932 (large phone)
- iPad Mini: 744×1133
- iPad Air/Pro 11": 820×1180
- iPad Pro 12.9": 1024×1366
- Mac (Designed for iPad): variable window, typically 1200+ wide
What to Check & Fix
-
Read the target view file(s) fully before making any changes
-
Common issues to fix:
- Hard-coded widths/heights → use
GeometryReader, .frame(maxWidth:), or relative sizing
- Fixed font sizes → use
@ScaledMetric or Dynamic Type sizes
- Fixed padding/spacing → scale with
min() or GeometryReader proportions
- Overlapping elements on small screens → use
ViewThatFits or size classes
- Wasted space on large screens → use
maxWidth constraints or multi-column layouts
- SpriteKit scenes → ensure camera and mapSize scale properly
-
SwiftUI best practices for this project:
- Use
@Environment(\.horizontalSizeClass) for compact vs regular layouts
- Use
GeometryReader sparingly — prefer relative modifiers when possible
- Use
.frame(minWidth:, idealWidth:, maxWidth:) for flexible containers
- For text:
@ScaledMetric(relativeTo:) with the project's custom fonts
- For overlays/modals: cap width with
.frame(maxWidth: 600) on iPad, full width on iPhone
- For grids:
LazyVGrid with adaptive(minimum:) columns
- For SpriteKit wrappers: scene.size should match mapSize (3500×2500), scaleMode
.aspectFill
-
Project-specific patterns:
- This project targets iOS 17+ and macOS 14+
- Uses
#if os(iOS) / #else for platform conditionals
- Custom fonts: Cinzel-Bold (titles), EBGaramond-Regular (body), PetitFormalScript (tagline)
- Color palette in
RenaissanceColors.swift
- SpriteKit scenes use 3500×2500 mapSize with camera zoom 0.5–3.5
-
After fixing: List all changes made and which device sizes they address.
