diff --git a/src/lib/components/LazyDropdown.svelte b/src/lib/components/LazyDropdown.svelte index 649099e..8e4ad88 100644 --- a/src/lib/components/LazyDropdown.svelte +++ b/src/lib/components/LazyDropdown.svelte @@ -151,11 +151,12 @@ alt="" imgwidth={option.icon_width ?? 1} imgheight={option.icon_height ?? 1} - class="mr-2 rounded" - style="height: 24px; max-width: 64px;" + class="rounded" + imgstyle="height: 24px;" + containerstyle="height: 24px;" /> {/if} - {option.label} + {option.label} {/each} diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte index 9fe5455..2d1c3ba 100644 --- a/src/lib/components/LazyImage.svelte +++ b/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 element */ + imgstyle?: string; + + /** Optional extra style for the lazy
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 @@
{#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}