From fe9932ace48866eb5237cd01ffd806f03bc048ba Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Mon, 18 May 2026 03:51:57 -0700
Subject: [PATCH] studio/frontend: soften toast shadow and tighten vertical
 padding (#5511)

* studio/frontend: soften toast shadow and tighten vertical padding

Sonner's defaults felt heavy in the chat header surface: a 16px
all-around padding made the box taller than the two-line content
warranted, and the 4/12/0.10 drop shadow read as a hard slab
against the light background. Trim padding to 10px vertical
(horizontal unchanged at 16px) and dial the shadow back to
0 2px 6px / 0.08 so the toast still lifts off the surface without
casting a heavy halo.

* studio/frontend: annotate why toast override needs !important

Sonner injects its base styles at runtime from inside its JS bundle,
so a plain cascade tie can lose depending on injection order. One
short comment above the override saves the next reader the dig.

* studio/frontend: boost toast shadow opacity in dark mode

Sonner's lighter 0.08 shadow disappears on the dark popover surface:
quantitative measurement of the shadow band (10px below the toast)
across Chromium / Firefox / WebKit showed only a ~3% luminance drop
vs background, well below perceptual threshold. Bump the dark-mode
opacity to 0.3, matching the existing .shadow-border light/dark ratio
(0.1 -> 0.3) and bringing the toast in line with .menu-soft-surface's
dark-mode shadow (0.28). Light mode keeps the original 0.08.
---
 studio/frontend/src/index.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 3702149059..dc73112994 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -996,6 +996,17 @@
 	}
 }
 
+/* Lighter shadow + tighter vertical padding than Sonner's defaults; !important because Sonner injects its base rules at runtime. */
+[data-sonner-toast][data-styled='true'] {
+	padding: 10px 16px !important;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* Boost shadow on dark surfaces; mirrors .shadow-border / .menu-soft-surface pattern. */
+.dark [data-sonner-toast][data-styled='true'] {
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
+}
+
 /* Selectable toast text; non-selectable toast buttons. */
 [data-sonner-toast],
 [data-sonner-toast] [data-content],