From ef8f2e701c4852a6574aeb3524392740fd837e6b Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Tue, 28 Jul 2026 02:57:16 -0500
Subject: [PATCH] fix(desktop): thin chrome scrollbars without platform chunk

Chromium 121+ prefers scrollbar-width over ::-webkit-scrollbar and
ignores the latter when both are set, so our themed thumb never painted
and mac got the chunky platform "thin" bar. Gate standard scrollbar-*
for non-webkit engines only; ship a 4px webkit thumb on .scrollbar-dt
and portal menus.
---
 apps/desktop/src/components/ui/log-view.tsx |  2 +-
 apps/desktop/src/styles.css                 | 39 ++++++++++++---------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/apps/desktop/src/components/ui/log-view.tsx b/apps/desktop/src/components/ui/log-view.tsx
index 8ae191af8c0..999b0ddf355 100644
--- a/apps/desktop/src/components/ui/log-view.tsx
+++ b/apps/desktop/src/components/ui/log-view.tsx
@@ -9,7 +9,7 @@ export function LogView({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       className={cn(
-        'overflow-auto rounded-lg border border-(--ui-stroke-tertiary) px-2.5 py-1.5 font-mono text-[0.6875rem] leading-[1.5] whitespace-pre-wrap break-words text-(--ui-text-tertiary) [scrollbar-width:thin]',
+        'overflow-auto rounded-lg border border-(--ui-stroke-tertiary) px-2.5 py-1.5 font-mono text-[0.6875rem] leading-[1.5] whitespace-pre-wrap break-words text-(--ui-text-tertiary)',
         className
       )}
       data-selectable-text="true"
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index e411f451df0..2b260de97b7 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -960,16 +960,17 @@ text-* variant utilities. */ .btn-arc {
 }
 
 @layer components {
-  .scrollbar-dt,
-  .scrollbar-dt * {
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
-  }
+  /* Chromium 121+ (Electron) prefers standard scrollbar-* over
+     ::-webkit-scrollbar and ignores the latter when both are set — platform
+     thin on mac still looks chunky. Use webkit for real thin thumbs; gate the
+     standard props so only non-webkit engines (Firefox) take that path.
+     https://developer.chrome.com/docs/css-ui/scrollbar-styling
+     https://syntackle.com/blog/changes-to-scrollbar-styling-in-chrome-121/ */
 
   .scrollbar-dt::-webkit-scrollbar,
   .scrollbar-dt *::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
+    width: 0.25rem;
+    height: 0.25rem;
   }
 
   .scrollbar-dt::-webkit-scrollbar-track,
@@ -983,7 +984,6 @@ text-* variant utilities. */ .btn-arc {
   .scrollbar-dt *::-webkit-scrollbar-thumb {
     background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
     border-radius: 9999rem;
-    border: 0.125rem solid transparent;
     background-clip: padding-box;
   }
 
@@ -1002,14 +1002,9 @@ text-* variant utilities. */ .btn-arc {
      render under document.body, outside the `.scrollbar-dt` scope on
      #root. Same visual treatment, applied directly to the overlay
      container so its (and only its) internal scrollbar is themed. */
-  .dt-portal-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: color-mix(in srgb, var(--dt-midground) 28%, transparent) transparent;
-  }
-
   .dt-portal-scrollbar::-webkit-scrollbar {
-    width: 0.375rem;
-    height: 0.375rem;
+    width: 0.25rem;
+    height: 0.25rem;
   }
 
   .dt-portal-scrollbar::-webkit-scrollbar-track,
@@ -1020,7 +1015,6 @@ text-* variant utilities. */ .btn-arc {
   .dt-portal-scrollbar::-webkit-scrollbar-thumb {
     background: color-mix(in srgb, var(--dt-midground) 28%, transparent);
     border-radius: 9999rem;
-    border: 0.0625rem solid transparent;
     background-clip: padding-box;
   }
 
@@ -1032,6 +1026,19 @@ text-* variant utilities. */ .btn-arc {
   .dt-portal-scrollbar::-webkit-scrollbar-button {
     display: none;
   }
+
+  @supports not selector(::-webkit-scrollbar) {
+    .scrollbar-dt,
+    .scrollbar-dt * {
+      scrollbar-width: thin;
+      scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
+    }
+
+    .dt-portal-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: color-mix(in srgb, var(--dt-midground) 28%, transparent) transparent;
+    }
+  }
 }
 
 /* Bottom clearance lives on [data-slot='aui_composer-clearance'] —