From 3b7d75c18aa0131ec9e65f24d37d22e0b7a8d3b3 Mon Sep 17 00:00:00 2001
From: Vogeluff <72712390+Vogeluff@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:43:15 +0200
Subject: [PATCH] feat(web): Add text-white-shadow to elements and increase the
 shadows effect (#29165)

* fix(web): increase text shadow strength for white text on thumbnails

* fix(web): fix class order for text-white-shadow

* fixup: format fix
---
 web/src/app.css                                          | 4 +++-
 web/src/lib/components/assets/thumbnail/Thumbnail.svelte | 2 +-
 web/src/routes/(user)/people/manage/+page.svelte         | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 4435b255d2..31ac9eb4da 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -159,7 +159,9 @@
   }
 
   .text-white-shadow {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+    text-shadow:
+      0 0 4px rgba(0, 0, 0, 0.9),
+      0 1px 3px rgba(0, 0, 0, 0.8);
   }
 
   .icon-white-drop-shadow {
diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index 347ff3e75f..8583b9f8ac 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -342,7 +342,7 @@
 
         {#if !!assetOwner}
           <div class="absolute inset-e-2 bottom-1 z-2 max-w-[50%]">
-            <p class="max-w-full truncate text-xs font-medium text-white drop-shadow-lg">
+            <p class="text-white-shadow max-w-full truncate p-1 text-xs font-medium text-white">
               {assetOwner.name}
             </p>
           </div>
diff --git a/web/src/routes/(user)/people/manage/+page.svelte b/web/src/routes/(user)/people/manage/+page.svelte
index 1e6b917768..4c311f638c 100644
--- a/web/src/routes/(user)/people/manage/+page.svelte
+++ b/web/src/routes/(user)/people/manage/+page.svelte
@@ -169,7 +169,9 @@
             preload={false}
           />
           {#if person.name}
-            <span class="absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-white select-text">
+            <span
+              class="text-white-shadow absolute inset-s-0 bottom-2 w-full px-1 text-center font-medium text-white select-text"
+            >
               {person.name}
             </span>
           {/if}