fix unlimited raids to show 8 character slots

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 {

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}
 		>
-			<CharacterRep characters={characters} />
+			<CharacterRep characters={characters} {unlimited} />
 		</RepSegment>
 
 		<RepSegment

src/lib/components/reps/CharacterRep.svelte

@@ -5,16 +5,20 @@
 	interface Props {
 		party?: Party
 		characters?: GridCharacter[]
+		unlimited?: boolean
 	}
 
-	let { party, characters: directCharacters }: Props = $props()
+	let { party, characters: directCharacters, unlimited = false }: Props = $props()
 
 	// Use direct characters if provided, otherwise get from party
 	const characters = $derived(directCharacters || party?.characters || [])
-	// Show 5 characters at positions 0-4
+	// Show 5 characters (or 8 for unlimited) at positions 0-4 (or 0-7)
-	const grid = $derived(Array.from({ length: 5 }, (_, i) =>
+	const slotCount = $derived(unlimited ? 8 : 5)
-		characters.find((c: GridCharacter) => c?.position === i)
+	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 @@
 </script>
 
 <div class="rep">
-	<ul class="characters">
+	<ul class="characters" class:unlimited>
 		{#each grid as c, i}
 			<li class="character" class:empty={!c}>
 				{#if c}<img
@@ -73,6 +77,14 @@
 			padding: 0;
 			list-style: none;
 
+			&.unlimited {
+				grid-template-columns: repeat(4, 1fr);
+
+				.character {
+					aspect-ratio: 1/1;
+				}
+			}
+
 			.character {
 				aspect-ratio: 16/33;
 				background: var(--placeholder-bg);

src/lib/components/reps/GridRep.svelte

@@ -74,7 +74,7 @@
 		</div>
 		<div class="gridContainer">
 			{#if currentView === 'characters'}
-				<div class="characterGrid"><CharacterRep {party} /></div>
+				<div class="characterGrid"><CharacterRep {party} unlimited={party.raid?.group?.unlimited} /></div>
 			{:else if currentView === 'summons'}
 				<div class="summonGrid"><SummonRep {party} extendedView={true} /></div>
 			{:else}