fix: dropdown getting clipped in modals

web/src/lib/components/elements/dropdown.svelte

@@ -11,9 +11,9 @@
 </script>
 
 <script lang="ts" generics="T">
-  import { clickOutside } from '$lib/actions/click-outside';
   import { Button, Text } from '@immich/ui';
   import { mdiCheck } from '@mdi/js';
+  import { Popover } from 'bits-ui';
   import { isEqual } from 'lodash-es';
   import { fly } from 'svelte/transition';
   import Icon from './icon.svelte';
@@ -30,6 +30,7 @@
     onSelect: (option: T) => void;
     onClickOutside?: () => void;
     render?: (item: T) => string | RenderedOption;
+    fullWidthButton?: boolean;
   }
 
   let {
@@ -44,6 +45,7 @@
     onSelect,
     onClickOutside = () => {},
     render = String,
+    fullWidthButton = true,
   }: Props = $props();
 
   const handleClickOutside = () => {
@@ -78,64 +80,69 @@
   };
 
   let renderedSelectedOption = $derived(renderOption(selectedOption));
-
-  const getAlignClass = (position: 'bottom-left' | 'bottom-right') => {
-    switch (position) {
-      case 'bottom-left': {
-        return 'start-0';
-      }
-      case 'bottom-right': {
-        return 'end-0';
-      }
-
-      default: {
-        return '';
-      }
-    }
-  };
 </script>
 
-<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }} class="relative">
+<!-- BUTTON TITLE -->
-  <!-- BUTTON TITLE -->
+<Popover.Root bind:open={showMenu}>
-  <Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
+  <Popover.Trigger>
-    {#if renderedSelectedOption?.icon}
+    {#snippet child({ props })}
-      <Icon path={renderedSelectedOption.icon} />
+      <Button {...props} fullWidth={fullWidthButton} {title} variant="ghost" color="secondary" size="small">
-    {/if}
+        {#if renderedSelectedOption?.icon}
-    <Text class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</Text>
+          <Icon path={renderedSelectedOption.icon} />
-  </Button>
+        {/if}
-
+        <Text class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</Text>
-  <!-- DROP DOWN MENU -->
+      </Button>
-  {#if showMenu}
+    {/snippet}
-    <div
+  </Popover.Trigger>
-      transition:fly={{ y: -30, duration: 250 }}
+  <Popover.Portal>
-      class="text-sm font-medium z-1 absolute flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className} {getAlignClass(
+    <Popover.Content
-        position,
+      align={position === 'bottom-left' ? 'start' : 'end'}
-      )}"
+      forceMount
+      onInteractOutside={handleClickOutside}
     >
-      {#each options as option (option)}
+      {#snippet child({ props, wrapperProps, open })}
-        {@const renderedOption = renderOption(option)}
+        <!-- DROP DOWN MENU -->
-        {@const buttonStyle = renderedOption.disabled ? '' : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}
+        {#if open}
-        <button
+          <div {...wrapperProps}>
-          type="button"
+            <div
-          class="grid grid-cols-[36px_1fr] place-items-center p-2 disabled:opacity-40 {buttonStyle}"
+              {...props}
-          disabled={renderedOption.disabled}
+              class={[
-          onclick={() => !renderedOption.disabled && handleSelectOption(option)}
+                'text-sm font-medium flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white',
-        >
+                className,
-          {#if isEqual(selectedOption, option)}
+                props.class,
-            <div class="text-immich-primary dark:text-immich-dark-primary">
+              ]}
-              <Icon path={mdiCheck} />
+              transition:fly={{ y: -30, duration: 250 }}
+            >
+              {#each options as option (option)}
+                {@const renderedOption = renderOption(option)}
+                {@const buttonStyle = renderedOption.disabled
+                  ? ''
+                  : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}
+                <button
+                  type="button"
+                  class="grid grid-cols-[36px_1fr] place-items-center p-2 disabled:opacity-40 {buttonStyle}"
+                  disabled={renderedOption.disabled}
+                  onclick={() => !renderedOption.disabled && handleSelectOption(option)}
+                >
+                  {#if isEqual(selectedOption, option)}
+                    <div class="text-immich-primary dark:text-immich-dark-primary">
+                      <Icon path={mdiCheck} />
+                    </div>
+                    <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
+                      {renderedOption.title}
+                    </p>
+                  {:else}
+                    <div></div>
+                    <p class="justify-self-start">
+                      {renderedOption.title}
+                    </p>
+                  {/if}
+                </button>
+              {/each}
             </div>
-            <p class="justify-self-start text-immich-primary dark:text-immich-dark-primary">
+          </div>
-              {renderedOption.title}
+        {/if}
-            </p>
+      {/snippet}
-          {:else}
+    </Popover.Content>
-            <div></div>
+  </Popover.Portal>
-            <p class="justify-self-start">
+</Popover.Root>
-              {renderedOption.title}
-            </p>
-          {/if}
-        </button>
-      {/each}
-    </div>
-  {/if}
-</div>

web/src/lib/modals/AlbumShareModal.svelte

@@ -101,6 +101,7 @@
                   </div>
 
                   <Dropdown
+                    fullWidthButton={false}
                     title={$t('role')}
                     options={roleOptions}
                     render={({ title, icon }) => ({ title, icon })}