mobile: fix ui bug causing perk select to have weird gaps

atomicptr · Dec 10, 2024 · ad207b7 · ad207b7
1 parent fb8981e
commit ad207b7
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/lib/components/PerkSelect.svelte b/src/lib/components/PerkSelect.svelte
@@ -41,7 +41,7 @@ const sort = (a: Perk, b: Perk) => translatableString(a.name).localeCompare(tran
 
     <Search class="my-2" bind:value={search} />
 
-    <div class="flex flex-col sm:flex-row gap-2 w-full">
+    <div class="flex flex-col sm:flex-row gap-1 w-full">
         {#each Object.keys(perkGroups) as perkGroupName}
             <div class="flex flex-col gap-2 grow basis-0">
                 {#if getPerksByCategoryName(perkGroupName).filter(inSearch).sort(sort).length > 0}
@@ -51,11 +51,11 @@ const sort = (a: Perk, b: Perk) => translatableString(a.name).localeCompare(tran
                     </div>
                 {/if}
 
-                <div class="flex flex-col gap-1">
+                <div class="flex flex-col sm:gap-1">
                     {#each getPerksByCategoryName(perkGroupName).filter(inSearch).sort(sort) as perk}
                         <PerkTooltip perkId={perk.id} class="flex flex-col">
                             <button
-                                class="card-btn disabled:hidden sm:disabled:flex flex-col w-full" 
+                                class="card-btn disabled:hidden sm:disabled:flex flex-col w-full my-1 sm:my-0" 
                                 class:btn-primary={perks.indexOf(perk.id) > -1}
                                 onclick={onSelect ? () => onSelect(perk.id) : undefined}
                                 disabled={(disabledPerks ?? []).indexOf(perk.id) > -1}