refactor: change width of the tierlistbox on the home page

DarthGigi · Jun 8, 2024 · 2d1a5e6 · 2d1a5e6
1 parent 02e5d58
commit 2d1a5e6
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/lib/components/SearchSelect.svelte b/src/lib/components/SearchSelect.svelte
@@ -21,7 +21,7 @@
 
 <DropdownMenu.Root>
   <DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="outline" class={cn("relative rounded-md rounded-l-none border-r border-input bg-background py-1.5 pl-3 text-left shadow-sm focus:z-10 focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm sm:leading-6")} aria-label="Reset search">
+    <Button builders={[builder]} variant="outline" class={cn("relative w-12 rounded-md rounded-l-none border-r border-input bg-background py-1.5 text-left shadow-sm focus:z-10 focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm sm:leading-6")} aria-label="Reset search">
       <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
     </Button>
   </DropdownMenu.Trigger>

diff --git a/src/lib/components/TierListbox.svelte b/src/lib/components/TierListbox.svelte
@@ -4,11 +4,13 @@
   import { preferences } from "$lib/stores/preferences";
   import { createEventDispatcher } from "svelte";
   import { ScrollArea } from "$lib/components/ui/scroll-area";
+  import { cn } from "$lib/utils";
 
   const dispatch = createEventDispatcher<{ onSelectedTierChange: { tier: number | undefined | unknown } }>();
 
   export let maxtier: number = 12;
   export let disabled: boolean = false;
+  export let tiggerClasses = "";
 
   let selected = false;
 
@@ -29,7 +31,7 @@
     dispatch("onSelectedTierChange", { tier: v ? v.value : undefined });
     if ($page.url.pathname !== "/profile" && v?.value !== 0) showAny = true;
   }}>
-  <Select.Trigger class={`w-40 border border-input bg-background font-medium focus:border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 md:w-44 ${!selected ? "text-muted-foreground" : ""}`} aria-label="Select a tier">
+  <Select.Trigger class={cn("w-40 border border-input bg-background font-medium focus:border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 md:w-44", !selected && "text-muted-foreground", tiggerClasses)} aria-label="Select a tier">
     <Select.Value placeholder="Select a tier" />
   </Select.Trigger>
   <Select.Content class="border-border bg-popover text-popover-foreground">

diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
@@ -316,6 +316,7 @@
     <div class="flex flex-col justify-center space-y-2">
       <Label class="sr-only">Tier</Label>
       <TierListbox
+        tiggerClasses="w-52"
         maxtier={$maxTier}
         disabled={false}
         on:onSelectedTierChange={({ detail }) => {