From 6ace86a00e10f0bd1d3fd458ee21bda51287fa5a Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 24 Sep 2025 01:24:57 -0700
Subject: [PATCH] Fix various spacing and sizing issues on party details

---
 src/lib/components/party/Party.svelte         |   23 +-
 .../party/PartySegmentedControl.svelte        |   20 +-
 .../sidebar/DescriptionSidebar.svelte         |    1 -
 .../segmented-control/rep-segment.module.scss |    4 +-
 .../segmented-control.module.scss             |  195 ++-
 src/routes/[username]/+page.svelte            |  152 +-
 src/routes/teams/new/+page.svelte             | 1383 +++++++++--------
 src/themes/_spacing.scss                      |    2 +-
 8 files changed, 949 insertions(+), 831 deletions(-)

diff --git a/src/lib/components/party/Party.svelte b/src/lib/components/party/Party.svelte
index 4c5b66d0..6c2c7aba 100644
--- a/src/lib/components/party/Party.svelte
+++ b/src/lib/components/party/Party.svelte
@@ -747,14 +747,14 @@
 											alt={`Avatar of ${party.user.username}`}
 											src={avatarSrc}
 											srcset={avatarSrcSet}
-											width="40"
-											height="40"
+											width="32"
+											height="32"
 										/>
 									{:else}
 										<div class="avatar-placeholder" aria-hidden="true"></div>
 									{/if}
 								</div>
-								<span class="username">@{party.user.username}</span>
+								<span class="username">{party.user.username}</span>
 							</a>
 						</div>
 					{/if}
@@ -940,17 +940,23 @@
 		width: 1200px;
 		margin: 0 auto;
 		padding: $unit-half;
+		gap: $unit-2x;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.party-header {
 		display: flex;
 		justify-content: space-between;
 		align-items: start;
-		margin-bottom: $unit-half;
-		padding: $unit-4x 0;
+		vertical-align: middle;
+		align-items: center;
+		padding: $unit-2x 0;
 	}
 
 	.party-info {
+		flex-grow: 1;
+
 		h1 {
 			margin: 0 0 $unit-fourth 0;
 			font-size: $font-xlarge;
@@ -981,8 +987,8 @@
 	}
 
 	.avatar-wrapper {
-		width: $unit-5x;
-		height: $unit-5x;
+		width: $unit-4x;
+		height: $unit-4x;
 		border-radius: 50%;
 		overflow: hidden;
 		background: var(--card-bg);
@@ -1031,7 +1037,7 @@
 	}
 
 	.username {
-		font-size: $font-medium;
+		font-size: $font-regular;
 		font-weight: $medium;
 	}
 
@@ -1044,7 +1050,6 @@
 	.cards {
 		display: flex;
 		gap: $unit-2x;
-		margin-bottom: $unit-2x;
 
 		// Individual card styles
 		.description-card,
diff --git a/src/lib/components/party/PartySegmentedControl.svelte b/src/lib/components/party/PartySegmentedControl.svelte
index b5becb88..b7c6ebe1 100644
--- a/src/lib/components/party/PartySegmentedControl.svelte
+++ b/src/lib/components/party/PartySegmentedControl.svelte
@@ -17,13 +17,7 @@
 		class?: string
 	}
 
-	let {
-		selectedTab = GridType.Character,
-		onTabChange,
-		party,
-		class: className
-	}: Props = $props()
-
+	let { selectedTab = GridType.Character, onTabChange, party, class: className }: Props = $props()
 
 	// Handle value changes
 	let value = $state(selectedTab)
@@ -44,12 +38,7 @@
 </script>
 
 <nav class={className}>
-	<SegmentedControl
-		bind:value
-		onValueChange={handleValueChange}
-		gap={true}
-		grow={true}
-	>
+	<SegmentedControl bind:value onValueChange={handleValueChange} gap={true} grow={true}>
 		<RepSegment
 			value={GridType.Character}
 			label={m.party_segmented_control_characters()}
@@ -82,8 +71,9 @@
 </nav>
 
 <style lang="scss">
+	@use '$src/themes/spacing' as *;
+
 	nav {
 		width: 100%;
-		margin-bottom: 1rem;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/sidebar/DescriptionSidebar.svelte b/src/lib/components/sidebar/DescriptionSidebar.svelte
index e8fe9d2b..78ba63c1 100644
--- a/src/lib/components/sidebar/DescriptionSidebar.svelte
+++ b/src/lib/components/sidebar/DescriptionSidebar.svelte
@@ -95,7 +95,6 @@
 	}
 
 	.actions-section {
-		margin-top: $unit-2x;
 		padding: $unit-2x;
 		padding-bottom: $unit-2x;
 		border-top: 1px solid var(--button-bg);
diff --git a/src/lib/components/ui/segmented-control/rep-segment.module.scss b/src/lib/components/ui/segmented-control/rep-segment.module.scss
index e9b727ab..07185fd1 100644
--- a/src/lib/components/ui/segmented-control/rep-segment.module.scss
+++ b/src/lib/components/ui/segmented-control/rep-segment.module.scss
@@ -10,7 +10,7 @@
 	padding: 0;
 	background: transparent;
 	border: none;
-	border-radius: $item-corner;
+	border-radius: $card-corner;
 	cursor: pointer;
 	transition: all 0.2s ease;
 
@@ -37,7 +37,7 @@
 	position: absolute;
 	inset: 0;
 	background: $grey-100;
-	border-radius: $item-corner;
+	border-radius: $card-corner;
 	opacity: 0;
 	transition: opacity 0.2s ease;
 
diff --git a/src/lib/components/ui/segmented-control/segmented-control.module.scss b/src/lib/components/ui/segmented-control/segmented-control.module.scss
index c9fb1540..1be8baa9 100644
--- a/src/lib/components/ui/segmented-control/segmented-control.module.scss
+++ b/src/lib/components/ui/segmented-control/segmented-control.module.scss
@@ -4,124 +4,123 @@
 @use 'themes/mixins';
 
 .wrapper {
-  display: flex;
-  justify-content: center;
+	display: flex;
+	justify-content: center;
 
-  &.raid {
-    width: 100%;
-  }
+	&.raid {
+		width: 100%;
+	}
 
-  @include mixins.breakpoint(small-tablet) {
-    width: 100%;
-  }
+	@include mixins.breakpoint(small-tablet) {
+		width: 100%;
+	}
 }
 
 .segmentedControl {
-  display: inline-flex;
-  padding: 3px;
-  position: relative;
-  gap: spacing.$unit-half;
-  user-select: none;
-  overflow: hidden;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	display: inline-flex;
+	position: relative;
+	gap: spacing.$unit-half;
+	user-select: none;
+	overflow: hidden;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  @include mixins.breakpoint(small-tablet) {
-    background: var(--card-bg);
-    border-radius: 100px;
-  }
+	@include mixins.breakpoint(small-tablet) {
+		background: var(--card-bg);
+		border-radius: 100px;
+	}
 
-  &.blended {
-    background: var(--input-bound-bg);
-    border-radius: layout.$full-corner;
-  }
+	&.blended {
+		background: var(--input-bound-bg);
+		border-radius: layout.$full-corner;
+	}
 
-  &.background {
-    background: var(--input-bg);
-    border-radius: layout.$full-corner;
-  }
+	&.background {
+		background: var(--input-bg);
+		border-radius: layout.$full-corner;
+	}
 
-  &.grow {
-    flex-grow: 1;
-  }
+	&.grow {
+		flex-grow: 1;
+	}
 
-  &.gap {
-    gap: spacing.$unit;
-  }
+	&.gap {
+		gap: spacing.$unit-2x;
+	}
 
-  &.raid {
-    width: 100%;
-  }
+	&.raid {
+		width: 100%;
+	}
 
-  // Element colors
-  &.fire {
-    [data-state='checked'] {
-      background: var(--fire-bg);
-      color: var(--fire-text);
-    }
+	// Element colors
+	&.fire {
+		[data-state='checked'] {
+			background: var(--fire-bg);
+			color: var(--fire-text);
+		}
 
-    button:hover {
-      background: var(--fire-hover-bg);
-      color: var(--fire-hover-text);
-    }
-  }
+		button:hover {
+			background: var(--fire-hover-bg);
+			color: var(--fire-hover-text);
+		}
+	}
 
-  &.water {
-    [data-state='checked'] {
-      background: var(--water-bg);
-      color: var(--water-text);
-    }
+	&.water {
+		[data-state='checked'] {
+			background: var(--water-bg);
+			color: var(--water-text);
+		}
 
-    button:hover {
-      background: var(--water-hover-bg);
-      color: var(--water-hover-text);
-    }
-  }
+		button:hover {
+			background: var(--water-hover-bg);
+			color: var(--water-hover-text);
+		}
+	}
 
-  &.earth {
-    [data-state='checked'] {
-      background: var(--earth-bg);
-      color: var(--earth-text);
-    }
+	&.earth {
+		[data-state='checked'] {
+			background: var(--earth-bg);
+			color: var(--earth-text);
+		}
 
-    button:hover {
-      background: var(--earth-hover-bg);
-      color: var(--earth-hover-text);
-    }
-  }
+		button:hover {
+			background: var(--earth-hover-bg);
+			color: var(--earth-hover-text);
+		}
+	}
 
-  &.wind {
-    [data-state='checked'] {
-      background: var(--wind-bg);
-      color: var(--wind-text);
-    }
+	&.wind {
+		[data-state='checked'] {
+			background: var(--wind-bg);
+			color: var(--wind-text);
+		}
 
-    button:hover {
-      background: var(--wind-hover-bg);
-      color: var(--wind-hover-text);
-    }
-  }
+		button:hover {
+			background: var(--wind-hover-bg);
+			color: var(--wind-hover-text);
+		}
+	}
 
-  &.light {
-    [data-state='checked'] {
-      background: var(--light-bg);
-      color: var(--light-text);
-    }
+	&.light {
+		[data-state='checked'] {
+			background: var(--light-bg);
+			color: var(--light-text);
+		}
 
-    button:hover {
-      background: var(--light-hover-bg);
-      color: var(--light-hover-text);
-    }
-  }
+		button:hover {
+			background: var(--light-hover-bg);
+			color: var(--light-hover-text);
+		}
+	}
 
-  &.dark {
-    [data-state='checked'] {
-      background: var(--dark-bg);
-      color: var(--dark-text);
-    }
+	&.dark {
+		[data-state='checked'] {
+			background: var(--dark-bg);
+			color: var(--dark-text);
+		}
 
-    button:hover {
-      background: var(--dark-hover-bg);
-      color: var(--dark-hover-text);
-    }
-  }
-}
\ No newline at end of file
+		button:hover {
+			background: var(--dark-hover-bg);
+			color: var(--dark-hover-text);
+		}
+	}
+}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 9db59027..5ac5d2fc 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -1,65 +1,113 @@
 <script lang="ts">
-  import type { PageData } from './$types'
-  import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
+	import type { PageData } from './$types'
+	import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
 
-  const { data } = $props() as { data: PageData }
-  const page = data.page || 1
-  const totalPages = data.totalPages || undefined
-  const tab = data.tab || 'teams'
-  const isOwner = data.isOwner || false
+	const { data } = $props() as { data: PageData }
+	const page = data.page || 1
+	const totalPages = data.totalPages || undefined
+	const tab = data.tab || 'teams'
+	const isOwner = data.isOwner || false
 
-  const avatarFile = data.user?.avatar?.picture || ''
-  function ensurePng(name: string) {
-    return /\.png$/i.test(name) ? name : `${name}.png`
-  }
-  function to2x(name: string) {
-    return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
-  }
-  const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
-  const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
+	const avatarFile = data.user?.avatar?.picture || ''
+	function ensurePng(name: string) {
+		return /\.png$/i.test(name) ? name : `${name}.png`
+	}
+	function to2x(name: string) {
+		return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
+	}
+	const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
+	const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
 </script>
 
 <section class="profile">
-  <header class="header">
-    {#if data.user?.avatar?.picture}
-      <img class="avatar" alt={`Avatar of ${data.user.username}`} src={avatarSrc} srcset={avatarSrcSet} width="64" height="64" />
-    {:else}
-      <div class="avatar" aria-hidden="true"></div>
-    {/if}
-    <div>
-      <h1>@{data.user.username}</h1>
-      <nav class="tabs" aria-label="Profile sections">
-        <a class:active={tab==='teams'} href="?tab=teams" data-sveltekit-preload-data="hover">Teams</a>
-        {#if isOwner}
-          <a class:active={tab==='favorites'} href="?tab=favorites" data-sveltekit-preload-data="hover">Favorites</a>
-        {/if}
-      </nav>
-    </div>
-  </header>
+	<header class="header">
+		{#if data.user?.avatar?.picture}
+			<img
+				class="avatar"
+				alt={`Avatar of ${data.user.username}`}
+				src={avatarSrc}
+				srcset={avatarSrcSet}
+				width="64"
+				height="64"
+			/>
+		{:else}
+			<div class="avatar" aria-hidden="true"></div>
+		{/if}
+		<div>
+			<h1>{data.user.username}</h1>
+			<nav class="tabs" aria-label="Profile sections">
+				<a class:active={tab === 'teams'} href="?tab=teams" data-sveltekit-preload-data="hover"
+					>Teams</a
+				>
+				{#if isOwner}
+					<a
+						class:active={tab === 'favorites'}
+						href="?tab=favorites"
+						data-sveltekit-preload-data="hover">Favorites</a
+					>
+				{/if}
+			</nav>
+		</div>
+	</header>
 
-  <ExploreGrid items={data.items} />
+	<ExploreGrid items={data.items} />
 
-  <nav class="pagination" aria-label="Pagination">
-    {#if page > 1}
-      <a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a>
-    {/if}
-    {#if totalPages && page < totalPages}
-      <a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a>
-    {/if}
-  </nav>
+	<nav class="pagination" aria-label="Pagination">
+		{#if page > 1}
+			<a rel="prev" href={`?page=${page - 1}`} data-sveltekit-preload-data="hover">Previous</a>
+		{/if}
+		{#if totalPages && page < totalPages}
+			<a rel="next" href={`?page=${page + 1}`} data-sveltekit-preload-data="hover">Next</a>
+		{/if}
+	</nav>
 </section>
 
 <style lang="scss">
-  @use '$src/themes/spacing' as *;
-  @use '$src/themes/colors' as *;
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
 
-  .profile { padding: $unit-2x 0; }
-  .header { display: flex; align-items: center; gap: $unit-2x; margin-bottom: $unit-2x; }
-  .avatar { width: 64px; height: 64px; border-radius: 50%; background: $grey-80; border: 1px solid $grey-75; object-fit: cover; }
-  .sub { color: $grey-55; margin: 0; }
-  .tabs { display: flex; gap: $unit-2x; margin-top: $unit-half; }
-  .tabs a { text-decoration: none; color: inherit; padding-bottom: 2px; border-bottom: 2px solid transparent; }
-  .tabs a.active { border-color: #3366ff; color: #3366ff; }
-  .pagination { display: flex; gap: $unit-2x; padding: $unit-2x 0; }
-  .pagination a { text-decoration: none; }
+	.profile {
+		padding: $unit-2x 0;
+	}
+	.header {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+		margin-bottom: $unit-2x;
+	}
+	.avatar {
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		background: $grey-80;
+		border: 1px solid $grey-75;
+		object-fit: cover;
+	}
+	.sub {
+		color: $grey-55;
+		margin: 0;
+	}
+	.tabs {
+		display: flex;
+		gap: $unit-2x;
+		margin-top: $unit-half;
+	}
+	.tabs a {
+		text-decoration: none;
+		color: inherit;
+		padding-bottom: 2px;
+		border-bottom: 2px solid transparent;
+	}
+	.tabs a.active {
+		border-color: #3366ff;
+		color: #3366ff;
+	}
+	.pagination {
+		display: flex;
+		gap: $unit-2x;
+		padding: $unit-2x 0;
+	}
+	.pagination a {
+		text-decoration: none;
+	}
 </style>
diff --git a/src/routes/teams/new/+page.svelte b/src/routes/teams/new/+page.svelte
index 3a70c490..9892e3c1 100644
--- a/src/routes/teams/new/+page.svelte
+++ b/src/routes/teams/new/+page.svelte
@@ -1,738 +1,815 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
-  import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
-  import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte'
-  import { openSearchSidebar, closeSearchSidebar } from '$lib/features/search/openSearchSidebar.svelte'
-  import PartySegmentedControl from '$lib/components/party/PartySegmentedControl.svelte'
-  import { GridType } from '$lib/types/enums'
-  import { setContext } from 'svelte'
-  import type { SearchResult } from '$lib/api/resources/search'
-  import { apiClient } from '$lib/api/client'
-  import { Dialog } from 'bits-ui'
-  import { replaceState } from '$app/navigation'
-  import { page } from '$app/stores'
+	import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
+	import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
+	import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte'
+	import {
+		openSearchSidebar,
+		closeSearchSidebar
+	} from '$lib/features/search/openSearchSidebar.svelte'
+	import PartySegmentedControl from '$lib/components/party/PartySegmentedControl.svelte'
+	import { GridType } from '$lib/types/enums'
+	import { setContext } from 'svelte'
+	import type { SearchResult } from '$lib/api/resources/search'
+	import { apiClient } from '$lib/api/client'
+	import { Dialog } from 'bits-ui'
+	import { replaceState } from '$app/navigation'
+	import { page } from '$app/stores'
 
-  // Get authentication status from page store
-  const isAuthenticated = $derived($page.data?.isAuthenticated ?? false)
-  const currentUser = $derived($page.data?.currentUser)
+	// Get authentication status from page store
+	const isAuthenticated = $derived($page.data?.isAuthenticated ?? false)
+	const currentUser = $derived($page.data?.currentUser)
 
-  // Local, client-only state for tab selection (Svelte 5 runes)
-  let activeTab = $state<GridType>(GridType.Weapon)
+	// Local, client-only state for tab selection (Svelte 5 runes)
+	let activeTab = $state<GridType>(GridType.Weapon)
 
-  // Open search sidebar on mount
-  let hasOpenedSidebar = $state(false)
-  $effect(() => {
-    if (!hasOpenedSidebar) {
-      hasOpenedSidebar = true
-      // Small delay to let the page render first
-      setTimeout(() => {
-        openSearchSidebar({
-          type: 'weapon',
-          onAddItems: handleAddItems,
-          canAddMore: true
-        })
-      }, 100)
-    }
-  })
+	// Open search sidebar on mount
+	let hasOpenedSidebar = $state(false)
+	$effect(() => {
+		if (!hasOpenedSidebar) {
+			hasOpenedSidebar = true
+			// Small delay to let the page render first
+			setTimeout(() => {
+				openSearchSidebar({
+					type: 'weapon',
+					onAddItems: handleAddItems,
+					canAddMore: true
+				})
+			}, 100)
+		}
+	})
 
-  function selectTab(gridType: GridType) {
-    activeTab = gridType
-    // Open sidebar when switching tabs
-    openSearchSidebar({
-      type: gridType === GridType.Weapon ? 'weapon' :
-            gridType === GridType.Summon ? 'summon' :
-            'character',
-      onAddItems: handleAddItems,
-      canAddMore: !isGridFull(gridType)
-    })
-  }
+	function selectTab(gridType: GridType) {
+		activeTab = gridType
+		// Open sidebar when switching tabs
+		openSearchSidebar({
+			type:
+				gridType === GridType.Weapon
+					? 'weapon'
+					: gridType === GridType.Summon
+						? 'summon'
+						: 'character',
+			onAddItems: handleAddItems,
+			canAddMore: !isGridFull(gridType)
+		})
+	}
 
-  // Helper to check if a grid is full
-  function isGridFull(gridType: GridType): boolean {
-    if (gridType === GridType.Weapon) return weapons.length >= 10
-    if (gridType === GridType.Summon) return summons.length >= 6
-    return characters.length >= 5
-  }
+	// Helper to check if a grid is full
+	function isGridFull(gridType: GridType): boolean {
+		if (gridType === GridType.Weapon) return weapons.length >= 10
+		if (gridType === GridType.Summon) return summons.length >= 6
+		return characters.length >= 5
+	}
 
-  // Grid state
-  let weapons = $state<any[]>([])
-  let summons = $state<any[]>([])
-  let characters = $state<any[]>([])
-  let selectedSlot = $state<number | null>(null)
-  let isFirstItemForSlot = false // Track if this is the first item after clicking empty cell
+	// Grid state
+	let weapons = $state<any[]>([])
+	let summons = $state<any[]>([])
+	let characters = $state<any[]>([])
+	let selectedSlot = $state<number | null>(null)
+	let isFirstItemForSlot = false // Track if this is the first item after clicking empty cell
 
-  // Party state
-  let partyId = $state<string | null>(null)
-  let shortcode = $state<string | null>(null)
-  let editKey = $state<string | null>(null)
-  let isCreatingParty = $state(false)
+	// Party state
+	let partyId = $state<string | null>(null)
+	let shortcode = $state<string | null>(null)
+	let editKey = $state<string | null>(null)
+	let isCreatingParty = $state(false)
 
-  // Error dialog state
-  let errorDialogOpen = $state(false)
-  let errorMessage = $state('')
-  let errorDetails = $state<string[]>([])
+	// Error dialog state
+	let errorDialogOpen = $state(false)
+	let errorMessage = $state('')
+	let errorDetails = $state<string[]>([])
 
+	// Calculate if grids are full
+	let isWeaponGridFull = $derived(weapons.length >= 10) // 1 mainhand + 9 grid slots
+	let isSummonGridFull = $derived(summons.length >= 6) // 6 summon slots (main + 4 grid + friend)
+	let isCharacterGridFull = $derived(characters.length >= 5) // 5 character slots
 
-  // Calculate if grids are full
-  let isWeaponGridFull = $derived(weapons.length >= 10) // 1 mainhand + 9 grid slots
-  let isSummonGridFull = $derived(summons.length >= 6) // 6 summon slots (main + 4 grid + friend)
-  let isCharacterGridFull = $derived(characters.length >= 5) // 5 character slots
+	let canAddMore = $derived(
+		activeTab === GridType.Weapon
+			? !isWeaponGridFull
+			: activeTab === GridType.Summon
+				? !isSummonGridFull
+				: !isCharacterGridFull
+	)
 
-  let canAddMore = $derived(
-    activeTab === GridType.Weapon ? !isWeaponGridFull :
-    activeTab === GridType.Summon ? !isSummonGridFull :
-    !isCharacterGridFull
-  )
+	// Handle adding items from search
+	async function handleAddItems(items: SearchResult[]) {
+		console.log('Adding items:', items, 'to tab:', activeTab)
 
-  // Handle adding items from search
-  async function handleAddItems(items: SearchResult[]) {
-    console.log('Adding items:', items, 'to tab:', activeTab)
+		// Create party on first item if not already created
+		if (!partyId && !isCreatingParty && items.length > 0) {
+			isCreatingParty = true
+			const firstItem = items[0]
 
-    // Create party on first item if not already created
-    if (!partyId && !isCreatingParty && items.length > 0) {
-      isCreatingParty = true
-      const firstItem = items[0]
+			try {
+				// Step 1: Create the party (with local_id only for anonymous users)
+				const partyPayload: any = {
+					name: 'New Team',
+					visibility: 1, // 1 = Public, 2 = Unlisted, 3 = Private
+					element: firstItem.element || 0 // Use item's element or default to null
+				}
 
-      try {
-        // Step 1: Create the party (with local_id only for anonymous users)
-        const partyPayload: any = {
-          name: 'New Team',
-          visibility: 1, // 1 = Public, 2 = Unlisted, 3 = Private
-          element: firstItem.element || 0 // Use item's element or default to null
-        }
+				// Only include localId for anonymous users
+				if (!isAuthenticated) {
+					const localId = apiClient.getLocalId()
+					partyPayload.localId = localId
+				}
 
-        // Only include localId for anonymous users
-        if (!isAuthenticated) {
-          const localId = apiClient.getLocalId()
-          partyPayload.localId = localId
-        }
+				// Create party using the API client
+				const result = await apiClient.createParty(partyPayload)
+				console.log('Party created:', result)
 
-        // Create party using the API client
-        const result = await apiClient.createParty(partyPayload)
-        console.log('Party created:', result)
+				// The response has { party, editKey? }
+				const response = result.party
+				partyId = response.id
+				shortcode = response.shortcode
 
-        // The response has { party, editKey? }
-        const response = result.party
-        partyId = response.id
-        shortcode = response.shortcode
+				if (!partyId || !shortcode) {
+					throw new Error('Party creation did not return ID or shortcode')
+				}
 
-        if (!partyId || !shortcode) {
-          throw new Error('Party creation did not return ID or shortcode')
-        }
+				// Store edit key if present (handled by API client)
+				if (result.editKey) {
+					editKey = result.editKey
+				}
 
-        // Store edit key if present (handled by API client)
-        if (result.editKey) {
-          editKey = result.editKey
-        }
+				// Step 2: Add the first item to the party
+				let position = selectedSlot !== null ? selectedSlot : -1 // Use selectedSlot if available
+				let itemAdded = false
+				try {
+					console.log('Adding item to party:', {
+						partyId,
+						itemId: firstItem.id,
+						type: activeTab,
+						position
+					})
 
-        // Step 2: Add the first item to the party
-        let position = selectedSlot !== null ? selectedSlot : -1 // Use selectedSlot if available
-        let itemAdded = false
-        try {
-          console.log('Adding item to party:', { partyId, itemId: firstItem.id, type: activeTab, position })
+					if (activeTab === GridType.Weapon) {
+						// Use selectedSlot if available, otherwise default to mainhand
+						if (selectedSlot === null) position = -1
+						const addResult = await apiClient.addWeapon(partyId, firstItem.granblue_id, position, {
+							mainhand: position === -1
+						})
+						console.log('Weapon added:', addResult)
+						itemAdded = true
 
-          if (activeTab === GridType.Weapon) {
-            // Use selectedSlot if available, otherwise default to mainhand
-            if (selectedSlot === null) position = -1
-            const addResult = await apiClient.addWeapon(
-              partyId,
-              firstItem.granblue_id,
-              position,
-              { mainhand: position === -1 }
-            )
-            console.log('Weapon added:', addResult)
-            itemAdded = true
+						// Update local state with the added weapon
+						weapons = [
+							...weapons,
+							{
+								id: addResult.grid_weapon?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: firstItem.granblue_id,
+									name: firstItem.name,
+									element: firstItem.element
+								},
+								mainhand: position === -1
+							}
+						]
+					} else if (activeTab === GridType.Summon) {
+						// Use selectedSlot if available, otherwise default to main summon
+						if (selectedSlot === null) position = -1
+						const addResult = await apiClient.addSummon(partyId, firstItem.granblue_id, position, {
+							main: position === -1,
+							friend: position === 6
+						})
+						console.log('Summon added:', addResult)
+						itemAdded = true
 
-            // Update local state with the added weapon
-            weapons = [...weapons, {
-              id: addResult.grid_weapon?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: firstItem.granblue_id,
-                name: firstItem.name,
-                element: firstItem.element
-              },
-              mainhand: position === -1
-            }]
-          } else if (activeTab === GridType.Summon) {
-            // Use selectedSlot if available, otherwise default to main summon
-            if (selectedSlot === null) position = -1
-            const addResult = await apiClient.addSummon(
-              partyId,
-              firstItem.granblue_id,
-              position,
-              { main: position === -1, friend: position === 6 }
-            )
-            console.log('Summon added:', addResult)
-            itemAdded = true
+						// Update local state with the added summon
+						summons = [
+							...summons,
+							{
+								id: addResult.grid_summon?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: firstItem.granblue_id,
+									name: firstItem.name,
+									element: firstItem.element
+								},
+								main: position === -1,
+								friend: position === 6
+							}
+						]
+					} else if (activeTab === GridType.Character) {
+						// Use selectedSlot if available, otherwise default to first slot
+						if (selectedSlot === null) position = 0
+						const addResult = await apiClient.addCharacter(
+							partyId,
+							firstItem.granblue_id,
+							position,
+							{}
+						)
+						console.log('Character added:', addResult)
+						itemAdded = true
 
-            // Update local state with the added summon
-            summons = [...summons, {
-              id: addResult.grid_summon?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: firstItem.granblue_id,
-                name: firstItem.name,
-                element: firstItem.element
-              },
-              main: position === -1,
-              friend: position === 6
-            }]
-          } else if (activeTab === GridType.Character) {
-            // Use selectedSlot if available, otherwise default to first slot
-            if (selectedSlot === null) position = 0
-            const addResult = await apiClient.addCharacter(
-              partyId,
-              firstItem.granblue_id,
-              position,
-              {}
-            )
-            console.log('Character added:', addResult)
-            itemAdded = true
+						// Update local state with the added character
+						characters = [
+							...characters,
+							{
+								id: addResult.grid_character?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: firstItem.granblue_id,
+									name: firstItem.name,
+									element: firstItem.element
+								}
+							}
+						]
+					}
+					selectedSlot = null // Reset after using
 
-            // Update local state with the added character
-            characters = [...characters, {
-              id: addResult.grid_character?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: firstItem.granblue_id,
-                name: firstItem.name,
-                element: firstItem.element
-              }
-            }]
-          }
-          selectedSlot = null // Reset after using
+					// Update URL without redirecting
+					if (itemAdded && shortcode) {
+						// Update the URL to reflect the new party without navigating
+						replaceState(`/teams/${shortcode}`, {})
+						// Continue to allow adding more items
+					}
+				} catch (addError: any) {
+					console.error('Failed to add first item:', addError)
+					// Show error to user but don't redirect
+					errorMessage = addError.message || 'Failed to add item to party'
+					errorDetails = addError.details || []
+					errorDialogOpen = true
+					// Still update URL to the created party even if item failed
+					if (shortcode) {
+						replaceState(`/teams/${shortcode}`, {})
+					}
+				}
 
-          // Update URL without redirecting
-          if (itemAdded && shortcode) {
-            // Update the URL to reflect the new party without navigating
-            replaceState(`/teams/${shortcode}`, {})
-            // Continue to allow adding more items
-          }
-        } catch (addError: any) {
-          console.error('Failed to add first item:', addError)
-          // Show error to user but don't redirect
-          errorMessage = addError.message || 'Failed to add item to party'
-          errorDetails = addError.details || []
-          errorDialogOpen = true
-          // Still update URL to the created party even if item failed
-          if (shortcode) {
-            replaceState(`/teams/${shortcode}`, {})
-          }
-        }
+				isCreatingParty = false // Reset flag after party creation completes
 
-        isCreatingParty = false // Reset flag after party creation completes
+				// If there are more items to add, continue processing them
+				if (items.length > 1) {
+					const remainingItems = items.slice(1)
+					await handleAddItems(remainingItems) // Recursive call to add remaining items
+				}
+				return // Exit after processing all items from party creation
+			} catch (error: any) {
+				console.error('Failed to create party:', error)
+				isCreatingParty = false
 
-        // If there are more items to add, continue processing them
-        if (items.length > 1) {
-          const remainingItems = items.slice(1)
-          await handleAddItems(remainingItems) // Recursive call to add remaining items
-        }
-        return // Exit after processing all items from party creation
-      } catch (error: any) {
-        console.error('Failed to create party:', error)
-        isCreatingParty = false
+				// Parse error message
+				if (error.message) {
+					errorMessage = error.message
+				} else {
+					errorMessage = 'Failed to create party'
+				}
 
-        // Parse error message
-        if (error.message) {
-          errorMessage = error.message
-        } else {
-          errorMessage = 'Failed to create party'
-        }
+				// Parse validation errors if present
+				if (error.details && Array.isArray(error.details)) {
+					errorDetails = error.details
+				} else if (error.errors && typeof error.errors === 'object') {
+					// Rails-style validation errors
+					errorDetails = Object.entries(error.errors).map(
+						([field, messages]) =>
+							`${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
+					)
+				} else {
+					errorDetails = []
+				}
 
-        // Parse validation errors if present
-        if (error.details && Array.isArray(error.details)) {
-          errorDetails = error.details
-        } else if (error.errors && typeof error.errors === 'object') {
-          // Rails-style validation errors
-          errorDetails = Object.entries(error.errors).map(
-            ([field, messages]) => `${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
-          )
-        } else {
-          errorDetails = []
-        }
+				errorDialogOpen = true
+				return
+			}
+		}
 
-        errorDialogOpen = true
-        return
-      }
-    }
+		// If party already exists, add items using grid API
+		if (partyId && !isCreatingParty) {
+			try {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i]
+					let position = -1 // Default position
 
-    // If party already exists, add items using grid API
-    if (partyId && !isCreatingParty) {
-      try {
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i]
-          let position = -1 // Default position
+					if (activeTab === GridType.Weapon) {
+						// Use selectedSlot for first item if available
+						if (
+							i === 0 &&
+							selectedSlot !== null &&
+							!weapons.find((w) => w.position === selectedSlot)
+						) {
+							position = selectedSlot
+							selectedSlot = null // Reset after using
+						} else {
+							// Find next empty weapon slot
+							const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1).filter(
+								(i) => !weapons.find((w) => w.position === i)
+							)
+							if (emptySlots.length === 0) return // Grid full
+							position = emptySlots[0]
+						}
 
-          if (activeTab === GridType.Weapon) {
-            // Use selectedSlot for first item if available
-            if (i === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
-              position = selectedSlot
-              selectedSlot = null // Reset after using
-            } else {
-              // Find next empty weapon slot
-              const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1)
-                .filter(i => !weapons.find(w => w.position === i))
-              if (emptySlots.length === 0) return // Grid full
-              position = emptySlots[0]
-            }
+						// Add weapon via API
+						const response = await apiClient.addWeapon(
+							partyId,
+							item.granblue_id, // Use granblue_id
+							position,
+							{ mainhand: position === -1 }
+						)
 
-            // Add weapon via API
-            const response = await apiClient.addWeapon(
-              partyId,
-              item.granblue_id, // Use granblue_id
-              position,
-              { mainhand: position === -1 }
-            )
+						// Add to local state
+						weapons = [
+							...weapons,
+							{
+								id: response.grid_weapon?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: item.granblue_id,
+									name: item.name,
+									element: item.element
+								},
+								mainhand: position === -1
+							}
+						]
+					} else if (activeTab === GridType.Summon) {
+						// Use selectedSlot for first item if available
+						if (
+							i === 0 &&
+							selectedSlot !== null &&
+							!summons.find((s) => s.position === selectedSlot)
+						) {
+							position = selectedSlot
+							selectedSlot = null // Reset after using
+						} else {
+							// Find next empty summon slot
+							const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
+								.filter((i) => !summons.find((s) => s.position === i))
+							if (emptySlots.length === 0) return // Grid full
+							position = emptySlots[0]
+						}
 
-            // Add to local state
-            weapons = [...weapons, {
-              id: response.grid_weapon?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: item.granblue_id,
-                name: item.name,
-                element: item.element
-              },
-              mainhand: position === -1
-            }]
-          } else if (activeTab === GridType.Summon) {
-            // Use selectedSlot for first item if available
-            if (i === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
-              position = selectedSlot
-              selectedSlot = null // Reset after using
-            } else {
-              // Find next empty summon slot
-              const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
-                .filter(i => !summons.find(s => s.position === i))
-              if (emptySlots.length === 0) return // Grid full
-              position = emptySlots[0]
-            }
+						// Add summon via API
+						const response = await apiClient.addSummon(
+							partyId,
+							item.granblue_id, // Use granblue_id
+							position,
+							{ main: position === -1, friend: position === 6 }
+						)
 
-            // Add summon via API
-            const response = await apiClient.addSummon(
-              partyId,
-              item.granblue_id, // Use granblue_id
-              position,
-              { main: position === -1, friend: position === 6 }
-            )
+						// Add to local state
+						summons = [
+							...summons,
+							{
+								id: response.grid_summon?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: item.granblue_id,
+									name: item.name,
+									element: item.element
+								},
+								main: position === -1,
+								friend: position === 6
+							}
+						]
+					} else if (activeTab === GridType.Character) {
+						// Use selectedSlot for first item if available
+						if (
+							i === 0 &&
+							selectedSlot !== null &&
+							!characters.find((c) => c.position === selectedSlot)
+						) {
+							position = selectedSlot
+							selectedSlot = null // Reset after using
+						} else {
+							// Find next empty character slot
+							const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
+								(i) => !characters.find((c) => c.position === i)
+							)
+							if (emptySlots.length === 0) return // Grid full
+							position = emptySlots[0]
+						}
 
-            // Add to local state
-            summons = [...summons, {
-              id: response.grid_summon?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: item.granblue_id,
-                name: item.name,
-                element: item.element
-              },
-              main: position === -1,
-              friend: position === 6
-            }]
-          } else if (activeTab === GridType.Character) {
-            // Use selectedSlot for first item if available
-            if (i === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
-              position = selectedSlot
-              selectedSlot = null // Reset after using
-            } else {
-              // Find next empty character slot
-              const emptySlots = Array.from({ length: 5 }, (_, i) => i)
-                .filter(i => !characters.find(c => c.position === i))
-              if (emptySlots.length === 0) return // Grid full
-              position = emptySlots[0]
-            }
+						// Add character via API
+						const response = await apiClient.addCharacter(
+							partyId,
+							item.granblue_id, // Use granblue_id
+							position,
+							{}
+						)
 
-            // Add character via API
-            const response = await apiClient.addCharacter(
-              partyId,
-              item.granblue_id, // Use granblue_id
-              position,
-              {}
-            )
+						// Add to local state
+						characters = [
+							...characters,
+							{
+								id: response.grid_character?.id || `temp-${Date.now()}`,
+								position,
+								object: {
+									granblueId: item.granblue_id,
+									name: item.name,
+									element: item.element
+								}
+							}
+						]
+					}
+				}
+			} catch (error: any) {
+				console.error('Failed to add item:', error)
+				errorMessage = error.message || 'Failed to add item'
+				errorDetails = error.details || []
+				errorDialogOpen = true
+			}
+			return
+		}
 
-            // Add to local state
-            characters = [...characters, {
-              id: response.grid_character?.id || `temp-${Date.now()}`,
-              position,
-              object: {
-                granblueId: item.granblue_id,
-                name: item.name,
-                element: item.element
-              }
-            }]
-          }
-        }
-      } catch (error: any) {
-        console.error('Failed to add item:', error)
-        errorMessage = error.message || 'Failed to add item'
-        errorDetails = error.details || []
-        errorDialogOpen = true
-      }
-      return
-    }
+		// Original local-only adding logic (before party creation)
+		if (activeTab === GridType.Weapon) {
+			// Add weapons to empty slots
+			const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1) // -1 for mainhand, 0-8 for grid
+				.filter((i) => !weapons.find((w) => w.position === i))
 
-    // Original local-only adding logic (before party creation)
-    if (activeTab === GridType.Weapon) {
-      // Add weapons to empty slots
-      const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1) // -1 for mainhand, 0-8 for grid
-        .filter(i => !weapons.find(w => w.position === i))
+			items.forEach((item, index) => {
+				let position: number
+				// Use selectedSlot for first item if available
+				if (
+					index === 0 &&
+					selectedSlot !== null &&
+					!weapons.find((w) => w.position === selectedSlot)
+				) {
+					position = selectedSlot
+					selectedSlot = null // Reset after using
+				} else {
+					// Find next empty slot
+					const availableSlots = emptySlots.filter((s) => !weapons.find((w) => w.position === s))
+					if (availableSlots.length === 0) return
+					position = availableSlots[0]
+				}
 
-      items.forEach((item, index) => {
-        let position: number
-        // Use selectedSlot for first item if available
-        if (index === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
-          position = selectedSlot
-          selectedSlot = null // Reset after using
-        } else {
-          // Find next empty slot
-          const availableSlots = emptySlots.filter(s => !weapons.find(w => w.position === s))
-          if (availableSlots.length === 0) return
-          position = availableSlots[0]
-        }
+				const newWeapon = {
+					id: `temp-${Date.now()}-${index}`,
+					position,
+					object: {
+						granblueId: item.granblue_id,
+						name: item.name,
+						element: item.element
+					},
+					mainhand: position === -1
+				}
+				console.log('Adding weapon:', newWeapon)
+				weapons = [...weapons, newWeapon]
+			})
+			console.log('Updated weapons array:', weapons)
+		} else if (activeTab === GridType.Summon) {
+			// Add summons to empty slots
+			const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
+				.filter((i) => !summons.find((s) => s.position === i))
 
-        const newWeapon = {
-          id: `temp-${Date.now()}-${index}`,
-          position,
-          object: {
-            granblueId: item.granblue_id,
-            name: item.name,
-            element: item.element
-          },
-          mainhand: position === -1
-        }
-        console.log('Adding weapon:', newWeapon)
-        weapons = [...weapons, newWeapon]
-      })
-      console.log('Updated weapons array:', weapons)
-    } else if (activeTab === GridType.Summon) {
-      // Add summons to empty slots
-      const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
-        .filter(i => !summons.find(s => s.position === i))
+			items.forEach((item, index) => {
+				let position: number
+				// Use selectedSlot for first item if available
+				if (
+					index === 0 &&
+					selectedSlot !== null &&
+					!summons.find((s) => s.position === selectedSlot)
+				) {
+					position = selectedSlot
+					selectedSlot = null // Reset after using
+				} else {
+					// Find next empty slot
+					const availableSlots = emptySlots.filter(
+						(s) => !summons.find((sum) => sum.position === s)
+					)
+					if (availableSlots.length === 0) return
+					position = availableSlots[0]
+				}
 
-      items.forEach((item, index) => {
-        let position: number
-        // Use selectedSlot for first item if available
-        if (index === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
-          position = selectedSlot
-          selectedSlot = null // Reset after using
-        } else {
-          // Find next empty slot
-          const availableSlots = emptySlots.filter(s => !summons.find(sum => sum.position === s))
-          if (availableSlots.length === 0) return
-          position = availableSlots[0]
-        }
+				summons = [
+					...summons,
+					{
+						id: `temp-${Date.now()}-${index}`,
+						position,
+						object: {
+							granblueId: item.granblue_id,
+							name: item.name,
+							element: item.element
+						},
+						main: position === -1,
+						friend: position === 6
+					}
+				]
+			})
+		} else if (activeTab === GridType.Character) {
+			// Add characters to empty slots
+			const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
+				(i) => !characters.find((c) => c.position === i)
+			)
 
-        summons = [...summons, {
-          id: `temp-${Date.now()}-${index}`,
-          position,
-          object: {
-            granblueId: item.granblue_id,
-            name: item.name,
-            element: item.element
-          },
-          main: position === -1,
-          friend: position === 6
-        }]
-      })
-    } else if (activeTab === GridType.Character) {
-      // Add characters to empty slots
-      const emptySlots = Array.from({ length: 5 }, (_, i) => i)
-        .filter(i => !characters.find(c => c.position === i))
+			items.forEach((item, index) => {
+				let position: number
+				// Use selectedSlot for first item if available
+				if (
+					index === 0 &&
+					selectedSlot !== null &&
+					!characters.find((c) => c.position === selectedSlot)
+				) {
+					position = selectedSlot
+					selectedSlot = null // Reset after using
+				} else {
+					// Find next empty slot
+					const availableSlots = emptySlots.filter((s) => !characters.find((c) => c.position === s))
+					if (availableSlots.length === 0) return
+					position = availableSlots[0]
+				}
 
-      items.forEach((item, index) => {
-        let position: number
-        // Use selectedSlot for first item if available
-        if (index === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
-          position = selectedSlot
-          selectedSlot = null // Reset after using
-        } else {
-          // Find next empty slot
-          const availableSlots = emptySlots.filter(s => !characters.find(c => c.position === s))
-          if (availableSlots.length === 0) return
-          position = availableSlots[0]
-        }
+				characters = [
+					...characters,
+					{
+						id: `temp-${Date.now()}-${index}`,
+						position,
+						object: {
+							granblueId: item.granblue_id,
+							name: item.name,
+							element: item.element
+						}
+					}
+				]
+			})
+		}
+	}
 
-        characters = [...characters, {
-          id: `temp-${Date.now()}-${index}`,
-          position,
-          object: {
-            granblueId: item.granblue_id,
-            name: item.name,
-            element: item.element
-          }
-        }]
-      })
-    }
-  }
+	// Remove functions
+	function removeWeapon(itemId: string) {
+		console.log('Removing weapon:', itemId)
+		weapons = weapons.filter((w) => w.id !== itemId)
+		return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+	}
 
-  // Remove functions
-  function removeWeapon(itemId: string) {
-    console.log('Removing weapon:', itemId)
-    weapons = weapons.filter(w => w.id !== itemId)
-    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
-  }
+	function removeSummon(itemId: string) {
+		console.log('Removing summon:', itemId)
+		summons = summons.filter((s) => s.id !== itemId)
+		return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+	}
 
-  function removeSummon(itemId: string) {
-    console.log('Removing summon:', itemId)
-    summons = summons.filter(s => s.id !== itemId)
-    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
-  }
+	function removeCharacter(itemId: string) {
+		console.log('Removing character:', itemId)
+		characters = characters.filter((c) => c.id !== itemId)
+		return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+	}
 
-  function removeCharacter(itemId: string) {
-    console.log('Removing character:', itemId)
-    characters = characters.filter(c => c.id !== itemId)
-    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
-  }
-
-  // Provide a minimal party context so Unit components can render safely.
-  setContext('party', {
-    getParty: () => ({ id: 'new', shortcode: 'new', weapons, summons, characters }),
-    updateParty: (updatedParty: any) => {
-      // Update the local state when party is updated
-      if (updatedParty.weapons) weapons = updatedParty.weapons
-      if (updatedParty.summons) summons = updatedParty.summons
-      if (updatedParty.characters) characters = updatedParty.characters
-    },
-    canEdit: () => true,
-    services: {
-      gridService: {
-        removeWeapon: (partyId: string, itemId: string) => removeWeapon(itemId),
-        removeSummon: (partyId: string, itemId: string) => removeSummon(itemId),
-        removeCharacter: (partyId: string, itemId: string) => removeCharacter(itemId),
-        addWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        addSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        addCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        replaceWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        replaceSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        replaceCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
-      },
-      partyService: { getEditKey: () => null }
-    },
-    openPicker: (opts: { type: 'weapon' | 'summon' | 'character'; position: number; item?: any }) => {
-      selectedSlot = opts.position
-      openSearchSidebar({
-        type: opts.type,
-        onAddItems: handleAddItems,
-        canAddMore: !isGridFull(
-          opts.type === 'weapon' ? GridType.Weapon :
-          opts.type === 'summon' ? GridType.Summon :
-          GridType.Character
-        )
-      })
-    }
-  })
+	// Provide a minimal party context so Unit components can render safely.
+	setContext('party', {
+		getParty: () => ({ id: 'new', shortcode: 'new', weapons, summons, characters }),
+		updateParty: (updatedParty: any) => {
+			// Update the local state when party is updated
+			if (updatedParty.weapons) weapons = updatedParty.weapons
+			if (updatedParty.summons) summons = updatedParty.summons
+			if (updatedParty.characters) characters = updatedParty.characters
+		},
+		canEdit: () => true,
+		services: {
+			gridService: {
+				removeWeapon: (partyId: string, itemId: string) => removeWeapon(itemId),
+				removeSummon: (partyId: string, itemId: string) => removeSummon(itemId),
+				removeCharacter: (partyId: string, itemId: string) => removeCharacter(itemId),
+				addWeapon: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				addSummon: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				addCharacter: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				replaceWeapon: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				replaceSummon: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				replaceCharacter: () =>
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
+			},
+			partyService: { getEditKey: () => null }
+		},
+		openPicker: (opts: {
+			type: 'weapon' | 'summon' | 'character'
+			position: number
+			item?: any
+		}) => {
+			selectedSlot = opts.position
+			openSearchSidebar({
+				type: opts.type,
+				onAddItems: handleAddItems,
+				canAddMore: !isGridFull(
+					opts.type === 'weapon'
+						? GridType.Weapon
+						: opts.type === 'summon'
+							? GridType.Summon
+							: GridType.Character
+				)
+			})
+		}
+	})
 </script>
 
 <main>
-  <div class="page-container">
-    <section class="party-content">
-      <header class="party-header">
-        <div class="party-info">
-          <h1>Create a new team</h1>
-          <p class="description">Search and click items to add them to your grid</p>
-        </div>
-        <button class="toggle-sidebar" on:click={() => openSearchSidebar({
-          type: activeTab === GridType.Weapon ? 'weapon' :
-                activeTab === GridType.Summon ? 'summon' :
-                'character',
-          onAddItems: handleAddItems,
-          canAddMore: !isGridFull(activeTab)
-        })}>
-          Open Search
-        </button>
-      </header>
+	<div class="page-container">
+		<section class="party-content">
+			<header class="party-header">
+				<div class="party-info">
+					<h1>Create a new team</h1>
+					<p class="description">Search and click items to add them to your grid</p>
+				</div>
+				<button
+					class="toggle-sidebar"
+					on:click={() =>
+						openSearchSidebar({
+							type:
+								activeTab === GridType.Weapon
+									? 'weapon'
+									: activeTab === GridType.Summon
+										? 'summon'
+										: 'character',
+							onAddItems: handleAddItems,
+							canAddMore: !isGridFull(activeTab)
+						})}
+				>
+					Open Search
+				</button>
+			</header>
 
-      <PartySegmentedControl
-        value={activeTab}
-        onValueChange={selectTab}
-        party={{
-          element: 0,
-          job: undefined,
-          characters,
-          weapons,
-          summons
-        }}
-        userGender={currentUser?.gender}
-      />
+			<PartySegmentedControl
+				value={activeTab}
+				onValueChange={selectTab}
+				party={{
+					element: 0,
+					job: undefined,
+					characters,
+					weapons,
+					summons
+				}}
+				userGender={currentUser?.gender}
+			/>
 
-      <div class="party-content">
-        {#if activeTab === GridType.Weapon}
-          <WeaponGrid {weapons} />
-        {:else if activeTab === GridType.Summon}
-          <SummonGrid {summons} />
-        {:else}
-          <CharacterGrid {characters} />
-        {/if}
-      </div>
-    </section>
-  </div>
+			<div class="party-content">
+				{#if activeTab === GridType.Weapon}
+					<WeaponGrid {weapons} />
+				{:else if activeTab === GridType.Summon}
+					<SummonGrid {summons} />
+				{:else}
+					<CharacterGrid {characters} />
+				{/if}
+			</div>
+		</section>
+	</div>
 </main>
 
 <!-- Error Dialog -->
 <Dialog.Root bind:open={errorDialogOpen}>
-  <Dialog.Portal>
-    <Dialog.Overlay class="dialog-overlay" />
-    <Dialog.Content class="dialog-content">
-      <Dialog.Title class="dialog-title">Error Creating Team</Dialog.Title>
-      <Dialog.Description class="dialog-description">
-        {errorMessage}
-      </Dialog.Description>
+	<Dialog.Portal>
+		<Dialog.Overlay class="dialog-overlay" />
+		<Dialog.Content class="dialog-content">
+			<Dialog.Title class="dialog-title">Error Creating Team</Dialog.Title>
+			<Dialog.Description class="dialog-description">
+				{errorMessage}
+			</Dialog.Description>
 
-      {#if errorDetails.length > 0}
-        <div class="error-details">
-          <p class="error-details-title">Details:</p>
-          <ul class="error-list">
-            {#each errorDetails as detail}
-              <li>{detail}</li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
+			{#if errorDetails.length > 0}
+				<div class="error-details">
+					<p class="error-details-title">Details:</p>
+					<ul class="error-list">
+						{#each errorDetails as detail}
+							<li>{detail}</li>
+						{/each}
+					</ul>
+				</div>
+			{/if}
 
-      <div class="dialog-actions">
-        <Dialog.Close class="dialog-button">
-          OK
-        </Dialog.Close>
-      </div>
-    </Dialog.Content>
-  </Dialog.Portal>
+			<div class="dialog-actions">
+				<Dialog.Close class="dialog-button">OK</Dialog.Close>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
 </Dialog.Root>
 
 <style>
-  /* Override the main element's padding for this page */
-  :global(main) {
-    padding: 0 !important;
-  }
+	/* Override the main element's padding for this page */
+	:global(main) {
+		padding: 0 !important;
+	}
 
-  .page-container {
-    display: flex;
-    gap: 0;
-    width: 100%;
-    min-height: 100vh;
-  }
+	.page-container {
+		display: flex;
+		gap: 0;
+		width: 100%;
+		min-height: 100vh;
+	}
 
-  .party-content {
-    flex: 1;
-    padding: 1rem 2rem;
-  }
+	.party-content {
+		flex: 1;
+		padding: 1rem 2rem;
+	}
 
-  .party-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: start;
-    margin-bottom: 1rem;
-  }
+	.party-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: start;
+	}
 
-  .party-info h1 {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.5rem;
-  }
+	.party-info h1 {
+		margin: 0 0 0.5rem 0;
+		font-size: 1.5rem;
+	}
 
-  .description {
-    color: #666;
-    margin: 0;
-  }
+	.description {
+		color: #666;
+		margin: 0;
+	}
 
-  .toggle-sidebar {
-    padding: 0.5rem 1rem;
-    background: #3366ff;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background 0.2s;
-  }
+	.toggle-sidebar {
+		padding: 0.5rem 1rem;
+		background: #3366ff;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		cursor: pointer;
+		font-size: 14px;
+		transition: background 0.2s;
+	}
 
-  .toggle-sidebar:hover {
-    background: #2857e0;
-  }
+	.toggle-sidebar:hover {
+		background: #2857e0;
+	}
 
-  .party-content {
-    min-height: 400px;
-  }
+	.party-content {
+		min-height: 400px;
+	}
 
-  /* Dialog styles */
-  :global(.dialog-overlay) {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 50;
-  }
+	/* Dialog styles */
+	:global(.dialog-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 50;
+	}
 
-  :global(.dialog-content) {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
-    border-radius: 8px;
-    padding: 24px;
-    max-width: 500px;
-    width: 90%;
-    max-height: 80vh;
-    overflow-y: auto;
-    z-index: 51;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-  }
+	:global(.dialog-content) {
+		position: fixed;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		background: white;
+		border-radius: 8px;
+		padding: 24px;
+		max-width: 500px;
+		width: 90%;
+		max-height: 80vh;
+		overflow-y: auto;
+		z-index: 51;
+		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+	}
 
-  .dialog-title {
-    font-size: 18px;
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #d32f2f;
-  }
+	.dialog-title {
+		font-size: 18px;
+		font-weight: 600;
+		margin-bottom: 8px;
+		color: #d32f2f;
+	}
 
-  .dialog-description {
-    color: #666;
-    margin-bottom: 16px;
-    line-height: 1.5;
-  }
+	.dialog-description {
+		color: #666;
+		margin-bottom: 16px;
+		line-height: 1.5;
+	}
 
-  .error-details {
-    background: #f5f5f5;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    padding: 12px;
-    margin-bottom: 20px;
-  }
+	.error-details {
+		background: #f5f5f5;
+		border: 1px solid #e0e0e0;
+		border-radius: 4px;
+		padding: 12px;
+		margin-bottom: 20px;
+	}
 
-  .error-details-title {
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #333;
-  }
+	.error-details-title {
+		font-weight: 600;
+		margin-bottom: 8px;
+		color: #333;
+	}
 
-  .error-list {
-    margin: 0;
-    padding-left: 20px;
-  }
+	.error-list {
+		margin: 0;
+		padding-left: 20px;
+	}
 
-  .error-list li {
-    color: #666;
-    margin-bottom: 4px;
-    list-style: disc;
-  }
+	.error-list li {
+		color: #666;
+		margin-bottom: 4px;
+		list-style: disc;
+	}
 
-  .dialog-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
+	.dialog-actions {
+		display: flex;
+		justify-content: flex-end;
+	}
 
-  .dialog-button {
-    padding: 8px 16px;
-    background: #3366ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background 0.2s;
-  }
+	.dialog-button {
+		padding: 8px 16px;
+		background: #3366ff;
+		color: white;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 14px;
+		transition: background 0.2s;
+	}
 
-  .dialog-button:hover {
-    background: #2857e0;
-  }
+	.dialog-button:hover {
+		background: #2857e0;
+	}
 </style>
diff --git a/src/themes/_spacing.scss b/src/themes/_spacing.scss
index 16695fbf..6614b1e1 100644
--- a/src/themes/_spacing.scss
+++ b/src/themes/_spacing.scss
@@ -9,7 +9,7 @@ $desktop: 1920px;
 $laptop: 1280px;
 $tablet: 768px;
 $phone: 375px;
-$grid-width: 720px;
+$grid-width: 780px;
 
 $character-rep-height: 111px;
 $summon-rep-height: 117px;