From b710f81d949a4a328809e912737dca277925ce18 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 22 Dec 2025 23:01:45 -0800 Subject: [PATCH] fix character rep sizing in segmented control, add forced gap between squares --- src/lib/components/reps/CharacterRep.svelte | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/lib/components/reps/CharacterRep.svelte b/src/lib/components/reps/CharacterRep.svelte index 9dc0e6cb..e5879481 100644 --- a/src/lib/components/reps/CharacterRep.svelte +++ b/src/lib/components/reps/CharacterRep.svelte @@ -104,29 +104,32 @@ height: 100%; display: flex; gap: $unit-half; + align-items: stretch; // Squares section stretches to match portraits height } - // Standard mode: 3 portraits taking full height + // Standard mode: 3 portraits - each gets flex: 1 to share width equally .portraits { display: flex; gap: $unit-half; - height: 100%; + flex: 3; // Portraits section takes 3 parts .character { - height: 100%; + flex: 1; aspect-ratio: 16/33; } } - // Standard mode: 2 stacked squares with gap filling remaining height + // Standard mode: 2 stacked squares with forced gap .squares { display: flex; flex-direction: column; - justify-content: space-between; - height: 100%; + gap: $unit-half; // Forced minimum gap + flex: 1; // Squares section takes 1 part .character { + flex: 1; // Each takes half remaining height after gap aspect-ratio: 1/1; + min-height: 0; // Allow shrinking to fit } }