From 8787937b7cd7cf8c7c1ab3a09f79b431de190b04 Mon Sep 17 00:00:00 2001
From: "Stephen Sagarino Jr." <113438801+ReidoBoss@users.noreply.github.com>
Date: Mon, 19 Oct 2026 16:24:11 +0800
Subject: [PATCH] :bug: Truncate long labels in the shadow options panel
 (#12414)

Long translations of "Blur" and "Spread" ran over the number input in the
advanced shadow options. The label inherited display: flex from the legacy
%input-label placeholder, where text-overflow has no effect, and it could not
shrink below its text.

Make the label a block with the DS text-ellipsis mixin, size it to its text,
and cap it at the field width minus room for the number. Labels that fit look
the same as before; longer ones end in an ellipsis and keep their tooltip.

Closes #4456
---
 .../ui/workspace/sidebar/options/rows/shadow_row.scss     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
index a376138e7f..4e0eff8a0b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
@@ -8,6 +8,7 @@
 @use "ds/typography.scss" as t;
 @use "ds/_borders.scss" as *;
 @use "ds/_utils.scss" as *;
+@use "ds/mixins.scss" as *;
 @use "refactor/common-refactor.scss" as deprecated;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
@@ -84,8 +85,13 @@
   @include t.use-typography("body-small");
 
   .shadow-advanced-label {
+    @include text-ellipsis;
+
     padding-inline-start: var(--sp-s);
-    inline-size: px2rem(60);
+    flex-shrink: 0;
+    inline-size: auto;
+    max-inline-size: calc(100% - #{px2rem(36)});
+    line-height: $sz-32;
   }
 }