granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix character rep sizing in segmented control, add forced gap between squares

Browse source
This commit is contained in:
Justin Edmund 2025-12-22 23:01:45 -08:00
parent 59f79262d5
commit b710f81d94
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/lib/components/reps/CharacterRep.svelte
View file

@ -104,29 +104,32 @@
height: 100%; height: 100%;
display: flex; display: flex;
gap: $unit-half; 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 { .portraits {
display: flex; display: flex;
gap: $unit-half; gap: $unit-half;
height: 100%; flex: 3; // Portraits section takes 3 parts
.character { .character {
height: 100%; flex: 1;
aspect-ratio: 16/33; aspect-ratio: 16/33;
} }
} }
// Standard mode: 2 stacked squares with gap filling remaining height // Standard mode: 2 stacked squares with forced gap
.squares { .squares {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; gap: $unit-half; // Forced minimum gap
height: 100%; flex: 1; // Squares section takes 1 part
.character { .character {
flex: 1; // Each takes half remaining height after gap
aspect-ratio: 1/1; aspect-ratio: 1/1;
min-height: 0; // Allow shrinking to fit
} }
} }