Fix various spacing and sizing issues on party details

src/lib/components/party/Party.svelte

@@ -747,14 +747,14 @@
 											alt={`Avatar of ${party.user.username}`}
 											src={avatarSrc}
 											srcset={avatarSrcSet}
-											width="40"
+											width="32"
-											height="40"
+											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;
+		vertical-align: middle;
-		padding: $unit-4x 0;
+		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;
+		width: $unit-4x;
-		height: $unit-5x;
+		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,

src/lib/components/party/PartySegmentedControl.svelte

@@ -17,13 +17,7 @@
 		class?: string
 	}
 
-	let {
+	let { selectedTab = GridType.Character, onTabChange, party, class: className }: Props = $props()
-		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
+	<SegmentedControl bind:value onValueChange={handleValueChange} gap={true} grow={true}>
-		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>

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);

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;
 

src/lib/components/ui/segmented-control/segmented-control.module.scss

@@ -18,7 +18,6 @@
 
 .segmentedControl {
 	display: inline-flex;
-  padding: 3px;
 	position: relative;
 	gap: spacing.$unit-half;
 	user-select: none;
@@ -45,7 +44,7 @@
 	}
 
 	&.gap {
-    gap: spacing.$unit;
+		gap: spacing.$unit-2x;
 	}
 
 	&.raid {

src/routes/[username]/+page.svelte

@@ -22,16 +22,29 @@
 <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" />
+			<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>
+			<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>
+				<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>
+					<a
+						class:active={tab === 'favorites'}
+						href="?tab=favorites"
+						data-sveltekit-preload-data="hover">Favorites</a
+					>
 				{/if}
 			</nav>
 		</div>
@@ -53,13 +66,48 @@
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/colors' as *;
 
-  .profile { padding: $unit-2x 0; }
+	.profile {
-  .header { display: flex; align-items: center; gap: $unit-2x; margin-bottom: $unit-2x; }
+		padding: $unit-2x 0;
-  .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; }
+	.header {
-  .tabs { display: flex; gap: $unit-2x; margin-top: $unit-half; }
+		display: flex;
-  .tabs a { text-decoration: none; color: inherit; padding-bottom: 2px; border-bottom: 2px solid transparent; }
+		align-items: center;
-  .tabs a.active { border-color: #3366ff; color: #3366ff; }
+		gap: $unit-2x;
-  .pagination { display: flex; gap: $unit-2x; padding: $unit-2x 0; }
+		margin-bottom: $unit-2x;
-  .pagination a { text-decoration: none; }
+	}
+	.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>

src/routes/teams/new/+page.svelte

@@ -4,7 +4,10 @@
 	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 {
+		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'
@@ -41,9 +44,12 @@
 		activeTab = gridType
 		// Open sidebar when switching tabs
 		openSearchSidebar({
-      type: gridType === GridType.Weapon ? 'weapon' :
+			type:
-            gridType === GridType.Summon ? 'summon' :
+				gridType === GridType.Weapon
-            'character',
+					? 'weapon'
+					: gridType === GridType.Summon
+						? 'summon'
+						: 'character',
 			onAddItems: handleAddItems,
 			canAddMore: !isGridFull(gridType)
 		})
@@ -74,16 +80,17 @@
 	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
 
 	let canAddMore = $derived(
-    activeTab === GridType.Weapon ? !isWeaponGridFull :
+		activeTab === GridType.Weapon
-    activeTab === GridType.Summon ? !isSummonGridFull :
+			? !isWeaponGridFull
-    !isCharacterGridFull
+			: activeTab === GridType.Summon
+				? !isSummonGridFull
+				: !isCharacterGridFull
 	)
 
 	// Handle adding items from search
@@ -131,22 +138,26 @@
 				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 })
+					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(
+						const addResult = await apiClient.addWeapon(partyId, firstItem.granblue_id, position, {
-              partyId,
+							mainhand: position === -1
-              firstItem.granblue_id,
+						})
-              position,
-              { mainhand: position === -1 }
-            )
 						console.log('Weapon added:', addResult)
 						itemAdded = true
 
 						// Update local state with the added weapon
-            weapons = [...weapons, {
+						weapons = [
+							...weapons,
+							{
 								id: addResult.grid_weapon?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -155,21 +166,22 @@
 									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(
+						const addResult = await apiClient.addSummon(partyId, firstItem.granblue_id, position, {
-              partyId,
+							main: position === -1,
-              firstItem.granblue_id,
+							friend: position === 6
-              position,
+						})
-              { main: position === -1, friend: position === 6 }
-            )
 						console.log('Summon added:', addResult)
 						itemAdded = true
 
 						// Update local state with the added summon
-            summons = [...summons, {
+						summons = [
+							...summons,
+							{
 								id: addResult.grid_summon?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -179,7 +191,8 @@
 								},
 								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
@@ -193,7 +206,9 @@
 						itemAdded = true
 
 						// Update local state with the added character
-            characters = [...characters, {
+						characters = [
+							...characters,
+							{
 								id: addResult.grid_character?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -201,7 +216,8 @@
 									name: firstItem.name,
 									element: firstItem.element
 								}
-            }]
+							}
+						]
 					}
 					selectedSlot = null // Reset after using
 
@@ -248,7 +264,8 @@
 				} 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}`
+						([field, messages]) =>
+							`${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
 					)
 				} else {
 					errorDetails = []
@@ -268,13 +285,18 @@
 
 					if (activeTab === GridType.Weapon) {
 						// Use selectedSlot for first item if available
-            if (i === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
+						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)
+							const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1).filter(
-                .filter(i => !weapons.find(w => w.position === i))
+								(i) => !weapons.find((w) => w.position === i)
+							)
 							if (emptySlots.length === 0) return // Grid full
 							position = emptySlots[0]
 						}
@@ -288,7 +310,9 @@
 						)
 
 						// Add to local state
-            weapons = [...weapons, {
+						weapons = [
+							...weapons,
+							{
 								id: response.grid_weapon?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -297,16 +321,21 @@
 									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)) {
+						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))
+								.filter((i) => !summons.find((s) => s.position === i))
 							if (emptySlots.length === 0) return // Grid full
 							position = emptySlots[0]
 						}
@@ -320,7 +349,9 @@
 						)
 
 						// Add to local state
-            summons = [...summons, {
+						summons = [
+							...summons,
+							{
 								id: response.grid_summon?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -330,16 +361,22 @@
 								},
 								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)) {
+						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)
+							const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
-                .filter(i => !characters.find(c => c.position === i))
+								(i) => !characters.find((c) => c.position === i)
+							)
 							if (emptySlots.length === 0) return // Grid full
 							position = emptySlots[0]
 						}
@@ -353,7 +390,9 @@
 						)
 
 						// Add to local state
-            characters = [...characters, {
+						characters = [
+							...characters,
+							{
 								id: response.grid_character?.id || `temp-${Date.now()}`,
 								position,
 								object: {
@@ -361,7 +400,8 @@
 									name: item.name,
 									element: item.element
 								}
-            }]
+							}
+						]
 					}
 				}
 			} catch (error: any) {
@@ -377,17 +417,21 @@
 		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))
+				.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)) {
+				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))
+					const availableSlots = emptySlots.filter((s) => !weapons.find((w) => w.position === s))
 					if (availableSlots.length === 0) return
 					position = availableSlots[0]
 				}
@@ -409,22 +453,30 @@
 		} 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))
+				.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)) {
+				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))
+					const availableSlots = emptySlots.filter(
+						(s) => !summons.find((sum) => sum.position === s)
+					)
 					if (availableSlots.length === 0) return
 					position = availableSlots[0]
 				}
 
-        summons = [...summons, {
+				summons = [
+					...summons,
+					{
 						id: `temp-${Date.now()}-${index}`,
 						position,
 						object: {
@@ -434,27 +486,35 @@
 						},
 						main: position === -1,
 						friend: position === 6
-        }]
+					}
+				]
 			})
 		} else if (activeTab === GridType.Character) {
 			// Add characters to empty slots
-      const emptySlots = Array.from({ length: 5 }, (_, i) => i)
+			const emptySlots = Array.from({ length: 5 }, (_, i) => i).filter(
-        .filter(i => !characters.find(c => c.position === i))
+				(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)) {
+				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))
+					const availableSlots = emptySlots.filter((s) => !characters.find((c) => c.position === s))
 					if (availableSlots.length === 0) return
 					position = availableSlots[0]
 				}
 
-        characters = [...characters, {
+				characters = [
+					...characters,
+					{
 						id: `temp-${Date.now()}-${index}`,
 						position,
 						object: {
@@ -462,7 +522,8 @@
 							name: item.name,
 							element: item.element
 						}
-        }]
+					}
+				]
 			})
 		}
 	}
@@ -470,19 +531,19 @@
 	// Remove functions
 	function removeWeapon(itemId: string) {
 		console.log('Removing weapon:', itemId)
-    weapons = weapons.filter(w => w.id !== 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)
+		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)
+		characters = characters.filter((c) => c.id !== itemId)
 		return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
 	}
 
@@ -501,24 +562,36 @@
 				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 } }),
+				addWeapon: () =>
-        addSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        addCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				addSummon: () =>
-        replaceWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+					Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
-        replaceSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+				addCharacter: () =>
-        replaceCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
+					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 }) => {
+		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 === 'weapon'
-          opts.type === 'summon' ? GridType.Summon :
+						? GridType.Weapon
-          GridType.Character
+						: opts.type === 'summon'
+							? GridType.Summon
+							: GridType.Character
 				)
 			})
 		}
@@ -533,13 +606,20 @@
 					<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({
+				<button
-          type: activeTab === GridType.Weapon ? 'weapon' :
+					class="toggle-sidebar"
-                activeTab === GridType.Summon ? 'summon' :
+					on:click={() =>
-                'character',
+						openSearchSidebar({
+							type:
+								activeTab === GridType.Weapon
+									? 'weapon'
+									: activeTab === GridType.Summon
+										? 'summon'
+										: 'character',
 							onAddItems: handleAddItems,
 							canAddMore: !isGridFull(activeTab)
-        })}>
+						})}
+				>
 					Open Search
 				</button>
 			</header>
@@ -592,9 +672,7 @@
 			{/if}
 
 			<div class="dialog-actions">
-        <Dialog.Close class="dialog-button">
+				<Dialog.Close class="dialog-button">OK</Dialog.Close>
-          OK
-        </Dialog.Close>
 			</div>
 		</Dialog.Content>
 	</Dialog.Portal>
@@ -622,7 +700,6 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: start;
-    margin-bottom: 1rem;
 	}
 
 	.party-info h1 {

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;