fix(web): shared link expiration date accessibility (#12060)

- use native select - shows focus, automatically has keyboard
  navigation, accessible for screen readers
- remove DropdownButton component
- fix dropdown styling in Safari

web/src/lib/components/shared-components/settings/setting-select.svelte

@@ -3,6 +3,8 @@
   import { fly } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiChevronDown } from '@mdi/js';
 
   export let value: string | number;
   export let options: { value: string | number; text: string }[];
@@ -46,17 +48,27 @@
     </p>
   {/if}
 
-  <select
-    class="immich-form-input w-full pb-2"
-    {disabled}
-    aria-describedby={desc ? `${name}-desc` : undefined}
-    {name}
-    id="{name}-select"
-    bind:value
-    on:change={handleChange}
-  >
-    {#each options as option}
-      <option value={option.value}>{option.text}</option>
-    {/each}
-  </select>
+  <div class="grid">
+    <Icon
+      path={mdiChevronDown}
+      size={'1.2em'}
+      ariaHidden={true}
+      class="pointer-events-none right-1 relative col-start-1 row-start-1 self-center justify-self-end {disabled
+        ? 'text-immich-bg'
+        : 'text-immich-fg dark:text-immich-bg'}"
+    />
+    <select
+      class="immich-form-input w-full appearance-none row-start-1 col-start-1 !pr-6"
+      {disabled}
+      aria-describedby={desc ? `${name}-desc` : undefined}
+      {name}
+      id="{name}-select"
+      bind:value
+      on:change={handleChange}
+    >
+      {#each options as option}
+        <option value={option.value}>{option.text}</option>
+      {/each}
+    </select>
+  </div>
 </div>