fix(web): correct tag rounding in search options (#26814)

web/src/lib/components/shared-components/search-bar/search-tags-section.svelte

@@ -2,11 +2,11 @@
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import { preferences } from '$lib/stores/user.store';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Checkbox, Icon, Label, Text } from '@immich/ui';
+  import { Checkbox, Label, Text } from '@immich/ui';
-  import { mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
+  import TagPill from '../tag-pill.svelte';
 
   interface Props {
     selectedTags: SvelteSet<string> | null;
@@ -73,24 +73,7 @@
       {#each selectedTags ?? [] as tagId (tagId)}
         {@const tag = tagMap[tagId]}
         {#if tag}
-          <div class="flex group transition-all">
+          <TagPill label={tag.value} onRemove={() => handleRemove(tagId)} />
-            <span
-              class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            >
-              <p class="text-sm">
-                {tag.value}
-              </p>
-            </span>
-
-            <button
-              type="button"
-              class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-              title={$t('remove_tag')}
-              onclick={() => handleRemove(tagId)}
-            >
-              <Icon icon={mdiClose} />
-            </button>
-          </div>
         {/if}
       {/each}
     </section>

web/src/lib/components/shared-components/tag-pill.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Icon } from '@immich/ui';
+  import { mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    label: string;
+    onRemove: () => void;
+  };
+
+  let { label, onRemove }: Props = $props();
+</script>
+
+<div class="flex group transition-all">
+  <span
+    class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+  >
+    <p class="text-sm">
+      {label}
+    </p>
+  </span>
+
+  <button
+    type="button"
+    class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+    title={$t('remove_tag')}
+    onclick={onRemove}
+  >
+    <Icon icon={mdiClose} />
+  </button>
+</div>

web/src/lib/modals/AssetTagModal.svelte

@@ -2,12 +2,13 @@
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { tagAssets } from '$lib/utils/asset-utils';
   import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
-  import { FormModal, Icon } from '@immich/ui';
+  import { FormModal } from '@immich/ui';
-  import { mdiClose, mdiTag } from '@mdi/js';
+  import { mdiTag } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
   import Combobox, { type ComboBoxOption } from '../components/shared-components/combobox.svelte';
+  import TagPill from '../components/shared-components/tag-pill.svelte';
 
   interface Props {
     onClose: (updated?: boolean) => void;
@@ -81,24 +82,7 @@
     {#each selectedIds as tagId (tagId)}
       {@const tag = tagMap[tagId]}
       {#if tag}
-        <div class="flex group transition-all">
+        <TagPill label={tag.value} onRemove={() => handleRemove(tagId)} />
-          <span
-            class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-          >
-            <p class="text-sm">
-              {tag.value}
-            </p>
-          </span>
-
-          <button
-            type="button"
-            class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            title={$t('remove_tag')}
-            onclick={() => handleRemove(tagId)}
-          >
-            <Icon icon={mdiClose} />
-          </button>
-        </div>
       {/if}
     {/each}
   </section>