Lib: Fix LazyImage in Dropdown component

src/lib/components/LazyCard.svelte

@@ -43,7 +43,6 @@
   let load: boolean = $state(false);
 
   const lazy_visible_handler = () => {
-    console.log("Hi");
     load = true;
   };
 </script>

src/lib/components/LazyDropdown.svelte

@@ -151,11 +151,12 @@
                 alt=""
                 imgwidth={option.icon_width ?? 1}
                 imgheight={option.icon_height ?? 1}
-                class="mr-2 rounded"
+                class="rounded"
-                style="height: 24px; max-width: 64px;"
+                imgstyle="height: 24px;"
+                containerstyle="height: 24px;"
               />
             {/if}
-            {option.label}
+            <span class="ml-2">{option.label}</span>
           </div>
         </ListBoxItem>
       {/each}

src/lib/components/LazyImage.svelte

@@ -12,9 +12,22 @@
 
     /** The aspect ratio height used to reserve image space (while its loading) */
     imgheight: number;
+
+    /** Optional extra style for the <img> element  */
+    imgstyle?: string;
+
+    /** Optional extra style for the lazy <div> container */
+    containerstyle?: string;
   }
 
-  let { src, imgwidth, imgheight, ...restProps }: LazyImageProps = $props();
+  let {
+    src,
+    imgwidth,
+    imgheight,
+    imgstyle = undefined,
+    containerstyle = undefined,
+    ...restProps
+  }: LazyImageProps = $props();
 
   // Once the image is visible, this will be set to true, triggering the loading
   let load: boolean = $state(false);
@@ -32,7 +45,7 @@
 <div
   use:lazyload
   onLazyVisible={lazy_visible_handler}
-  style="width: 100%; aspect-ratio: {imgwidth} / {imgheight};"
+  style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ?? ''}"
 >
   {#if load}
     {#await fetch_image_base64(src) then data}
@@ -40,7 +53,7 @@
         src={data}
         use:img_opacity_handler
         class="bg-surface-100 transition-opacity"
-        style="width: 100%; opacity: 0; transition-duration: 500ms;"
+        style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
         {...restProps}
       />
     {/await}

src/routes/+layout.svelte

@@ -120,7 +120,7 @@
     <!-- Menu Drawer -->
     <!-- Menu Drawer -->
     <!-- Menu Drawer -->
-    <div class="flex flex-col gap-2 p-3">
+    <div class="flex flex-col gap-2 p-2 pt-3">
       <Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
       <Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
         >Season Picks
@@ -137,7 +137,7 @@
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <!-- Data Drawer -->
-    <div class="flex flex-col gap-2 p-3">
+    <div class="flex flex-col gap-2 p-2 pt-3">
       <Button href="/data/raceresult" onclick={close_drawer} color="surface" fullwidth
         >Race Results
       </Button>
@@ -148,7 +148,7 @@
     <!-- Login Drawer -->
     <!-- Login Drawer -->
     <!-- Login Drawer -->
-    <div class="flex flex-col gap-2 p-3">
+    <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Enter Username and Password</h4>
       <form method="POST" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->
@@ -177,7 +177,7 @@
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
     <!-- Profile Drawer -->
-    <div class="flex flex-col gap-2 p-3">
+    <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Edit Profile</h4>
       <form method="POST" enctype="multipart/form-data" class="contents">
         <!-- Supply the pathname so the form can redirect to the current page. -->