diff --git a/src/lib/components/grids/CharacterGrid.svelte b/src/lib/components/grids/CharacterGrid.svelte index 8d7c4a9f..57e85cd6 100644 --- a/src/lib/components/grids/CharacterGrid.svelte +++ b/src/lib/components/grids/CharacterGrid.svelte @@ -102,7 +102,15 @@ gap: $unit-3x; &.unlimited { - grid-template-columns: repeat(8, minmax(0, 1fr)); + // Use flexbox to center the partial second row + display: flex; + flex-wrap: wrap; + justify-content: center; + + // 6 units must fit in space of 5 + & > li { + width: 116px; + } } & > li { diff --git a/src/lib/components/party/PartySegmentedControl.svelte b/src/lib/components/party/PartySegmentedControl.svelte index 634fab7e..e3a9efcf 100644 --- a/src/lib/components/party/PartySegmentedControl.svelte +++ b/src/lib/components/party/PartySegmentedControl.svelte @@ -25,6 +25,7 @@ const weapons = $derived(party.weapons) const summons = $derived(party.summons) const characters = $derived(party.characters) + const unlimited = $derived(party.raid?.group?.unlimited ?? false) // Handle value changes let value = $state(selectedTab) @@ -47,7 +48,7 @@ label={m.party_segmented_control_characters()} selected={value === GridType.Character} > - + - characters.find((c: GridCharacter) => c?.position === i) - )) + // Show 5 characters (or 8 for unlimited) at positions 0-4 (or 0-7) + const slotCount = $derived(unlimited ? 8 : 5) + const grid = $derived( + Array.from({ length: slotCount }, (_, i) => + characters.find((c: GridCharacter) => c?.position === i) + ) + ) function characterImageUrl(c?: GridCharacter): string { const id = c?.character?.granblueId @@ -31,7 +35,7 @@ return getCharacterImageWithPose( id, - 'main', + unlimited ? 'square' : 'main', c?.uncapLevel ?? 0, c?.transcendenceStep ?? 0, mainWeaponElement, @@ -41,7 +45,7 @@ - + {#each grid as c, i} {#if c} {#if currentView === 'characters'} - + {:else if currentView === 'summons'} {:else}