Wrap map menu if it gets too large

Indy-Center · Feb 3, 2025 · 352a645 · 352a645
1 parent 9c851a7
commit 352a645
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/lib/components/map/MapMenu.svelte b/src/lib/components/map/MapMenu.svelte
@@ -23,18 +23,18 @@
 </script>
 
 <div
-	class="flex items-center justify-center gap-x-2 rounded-2xl bg-surface/95 p-2 ring-1 ring-black/5 drop-shadow-lg backdrop-blur-md dark:bg-surface-dark/95 dark:ring-white/10"
+	class="flex max-w-[300px] flex-wrap items-center gap-2 rounded-2xl bg-surface/95 p-2 ring-1 ring-black/5 drop-shadow-lg backdrop-blur-md dark:bg-surface-dark/95 dark:ring-white/10"
 >
 	{#each actions as action, i}
 		{#if action.dividerBefore}
-			<div class="mx-1 h-6 w-px bg-surface-tertiary dark:bg-surface-dark-tertiary"></div>
+			<div class="h-6 w-px bg-surface-tertiary dark:bg-surface-dark-tertiary"></div>
 		{/if}
 		{#if action.tooltip}
 			<Tooltip text={action.tooltip}>
 				<button
 					type="button"
 					class={{
-						'rounded-lg border border-accent px-4 py-2 text-sm font-medium transition duration-300 focus:outline-none': true,
+						'flex items-center justify-center rounded-lg border border-accent px-4 py-2 text-sm font-medium transition duration-300 focus:outline-none': true,
 						'bg-accent text-white hover:bg-accent/90': action.active,
 						'bg-surface text-accent hover:bg-accent/10': !action.active,
 						'dark:bg-accent dark:text-white': action.active,
@@ -55,7 +55,7 @@
 			<button
 				type="button"
 				class={{
-					'rounded-lg border border-accent px-4 py-2 text-sm font-medium transition duration-300 focus:outline-none': true,
+					'flex items-center justify-center rounded-lg border border-accent px-4 py-2 text-sm font-medium transition duration-300 focus:outline-none': true,
 					'bg-accent text-white hover:bg-accent/90': action.active,
 					'bg-surface text-accent hover:bg-accent/10': !action.active,
 					'dark:bg-accent dark:text-white': action.active,
@@ -73,7 +73,7 @@
 			</button>
 		{/if}
 		{#if action.dividerAfter}
-			<div class="mx-1 h-6 w-px bg-surface-tertiary dark:bg-surface-dark-tertiary"></div>
+			<div class="h-6 w-px bg-surface-tertiary dark:bg-surface-dark-tertiary"></div>
 		{/if}
 	{/each}
 </div>