From 32b2cdba61ac24b6a659854ebf7d48289f36b3c8 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:41:46 +0200
Subject: [PATCH] fix(web): refactor some styling (#31269)

---
 web/src/app.css                               |  2 +-
 .../DetailPanelDescription.svelte             |  2 +-
 .../[[assetId=id]]/+page.svelte               | 16 ++++++------
 .../[[assetId=id]]/DuplicateAsset.svelte      |  8 +++---
 .../DuplicatesCompareControl.svelte           |  2 +-
 .../[[assetId=id]]/InfoRow.svelte             | 25 +++++++------------
 6 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 31ac9eb4d..4ee7e1b27 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -34,7 +34,7 @@
 }
 
 @utility immich-form-input {
-  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-primary focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 dark:focus-within:ring-primary flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base pl-4 pr-4;
+  @apply bg-gray-100 ring-1 ring-gray-200 transition outline-none focus-within:ring-primary focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-neutral-900 dark:focus-within:ring-primary flex w-full items-center rounded-lg disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 flex-1 py-2.5 text-base px-4;
 }
 
 @utility immich-form-label {
diff --git a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
index d8aea0f9e..14d123dad 100644
--- a/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
+++ b/web/src/lib/components/asset-viewer/DetailPanelDescription.svelte
@@ -33,7 +33,7 @@
   <section class="mt-10 px-4">
     <Textarea
       bind:value={description}
-      class="max-h-40 resize-none border-b border-gray-500 bg-transparent pl-0 ring-0 outline-none focus:border-b-2 focus:border-immich-primary focus:ring-0 dark:bg-transparent dark:focus:border-immich-dark-primary"
+      class="max-h-40 resize-none border-b border-gray-500 bg-transparent ps-0 ring-0 outline-none focus:border-b-2 focus:border-immich-primary focus:ring-0 dark:bg-transparent dark:focus:border-immich-dark-primary"
       rows={1}
       grow
       shape="rectangle"
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
index f673abec6..405d25078 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -7,6 +7,7 @@
   import DuplicatesCompareControl from './DuplicatesCompareControl.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { languageManager } from '$lib/managers/language-manager.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { Route } from '$lib/route';
   import { locale } from '$lib/stores/preferences.store';
@@ -255,7 +256,8 @@
   <div>
     {#if duplicates && duplicates.length > 0}
       <Text size="small" color="muted" class="mb-4">
-        <p>{$t('duplicates_description')} <LinkToDocs href="https://docs.immich.app/features/duplicates-utility" /></p>
+        {$t('duplicates_description')}
+        <LinkToDocs href="https://docs.immich.app/features/duplicates-utility" />
       </Text>
 
       {#key duplicates[duplicatesIndex].duplicateId}
@@ -272,8 +274,7 @@
             <div class="flex text-xs text-black">
               <Button
                 size="small"
-                leadingIcon={mdiPageFirst}
-                color="primary"
+                leadingIcon={languageManager.rtl ? mdiPageLast : mdiPageFirst}
                 class="flex place-items-center gap-2 rounded-s-full px-2 sm:px-4"
                 onclick={handleFirst}
                 disabled={duplicatesIndex === 0}
@@ -282,8 +283,7 @@
               </Button>
               <Button
                 size="small"
-                leadingIcon={mdiChevronLeft}
-                color="primary"
+                leadingIcon={languageManager.rtl ? mdiChevronRight : mdiChevronLeft}
                 class="flex place-items-center gap-2 rounded-e-full px-2 sm:px-4"
                 onclick={handlePrevious}
                 disabled={duplicatesIndex === 0}
@@ -297,8 +297,7 @@
             <div class="flex text-xs text-black">
               <Button
                 size="small"
-                trailingIcon={mdiChevronRight}
-                color="primary"
+                trailingIcon={languageManager.rtl ? mdiChevronLeft : mdiChevronRight}
                 class="flex place-items-center gap-2 rounded-s-full px-2 sm:px-4"
                 onclick={handleNext}
                 disabled={duplicatesIndex === duplicates.length - 1}
@@ -307,8 +306,7 @@
               </Button>
               <Button
                 size="small"
-                trailingIcon={mdiPageLast}
-                color="primary"
+                trailingIcon={languageManager.rtl ? mdiPageFirst : mdiPageLast}
                 class="flex place-items-center gap-2 rounded-e-full px-2 sm:px-4"
                 onclick={handleLast}
                 disabled={duplicatesIndex === duplicates.length - 1}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
index 4026ef676..42536a0a0 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicateAsset.svelte
@@ -40,7 +40,7 @@
   );
 </script>
 
-<div class="min-w-60 flex-1 rounded-lg border transition-colors">
+<div class="min-w-60 flex-1 overflow-hidden rounded-lg border transition-colors">
   <div class="relative w-full">
     <button
       type="button"
@@ -53,7 +53,7 @@
       <img
         src={getAssetMediaUrl({ id: asset.id })}
         alt={$getAltText(toTimelineAsset(asset))}
-        class="h-60 w-full rounded-t-md object-cover"
+        class="h-60 w-full object-cover"
         draggable="false"
       />
 
@@ -102,7 +102,7 @@
   </div>
 
   <div
-    class="grid place-items-start gap-y-2 rounded-b-lg py-2 text-sm transition-colors {isSelected
+    class="grid place-items-start divide-y text-sm transition-colors {isSelected
       ? 'bg-success/15 dark:bg-[#001a06]'
       : 'bg-transparent'}"
   >
@@ -113,7 +113,7 @@
     {/each}
 
     <!-- Albums always shown -->
-    <InfoRow icon={mdiBookmarkOutline} borderBottom={false} title={$t('albums')}>
+    <InfoRow icon={mdiBookmarkOutline} title={$t('albums')}>
       {#await getAllAlbums({ assetId: asset.id })}
         {$t('scanning_for_album')}
       {:then albums}
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
index d6a5901fc..421ec6853 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/DuplicatesCompareControl.svelte
@@ -186,7 +186,7 @@
   </div>
 
   {#if hasMore}
-    <div class="flex justify-center pb-2">
+    <div class="flex justify-center">
       <Button size="small" variant="ghost" color="secondary" onclick={() => (showMore = !showMore)}>
         <Icon icon={showMore ? mdiChevronUp : mdiChevronDown} size="18" class="me-1" />
         {showMore
diff --git a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
index ef2895929..0394495f9 100644
--- a/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
+++ b/web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/InfoRow.svelte
@@ -4,31 +4,24 @@
 
   interface Props {
     icon: string;
-    children?: Snippet;
-    borderBottom?: boolean;
-    title?: string;
+    children: Snippet;
+    title: string;
     tooltip?: string;
   }
 
-  let { icon, children, borderBottom = true, title, tooltip }: Props = $props();
+  let { icon, children, title, tooltip }: Props = $props();
 </script>
 
-<div
-  class="grid w-full grid-cols-[20px_auto_1fr] overflow-hidden px-1 py-0.5"
-  class:border-b={borderBottom}
-  title={tooltip ?? title}
->
+<div class="grid w-full grid-cols-[20px_auto_1fr] gap-1 overflow-hidden px-2 py-1.5" title={title ?? tooltip}>
   <Icon {icon} size="16" class="self-center text-dark/25" />
 
-  {#if title}
-    <Text size="tiny" class="self-center truncate px-1 pr-2 text-immich-fg/40 dark:text-immich-dark-fg/40">
-      {title}
-    </Text>
-  {/if}
+  <Text size="tiny" class="self-center truncate pe-1 text-immich-fg/40 dark:text-immich-dark-fg/40">
+    {title}
+  </Text>
 
-  <div class="justify-self-end overflow-hidden rounded-sm px-1 text-end transition-colors">
+  <div class="justify-self-end overflow-hidden rounded-sm text-end transition-colors">
     <Text size="tiny" class="break-all">
-      {@render children?.()}
+      {@render children()}
     </Text>
   </div>
 </div>