From 95918cb9979a175a778c09dad20df664ee5f0f4d Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Fri, 15 May 2026 15:01:19 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20scrollbar=20color=20in=20?=
 =?UTF-8?q?dark=20mode=20+=20layout=20bugs=20(#3226)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 🐛 header scrollbar overlap in desktop

* refactor: 💡 undo desktop scrollbar changes

* refactor: 💡 fix whitespace issues when viewport is small

* fix: 🐛 scrollbar color issue in dark mode

* fix: 🐛 move style inside of media query
---
 .../addon/styles/hds/themes/dark-mode/index.scss     | 12 ++++++++++++
 .../app/styles/rose/components/layout/_page.scss     |  2 +-
 ui/desktop/app/styles/app.scss                       |  1 -
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
index ec0ee6c8b..5cd2052f0 100644
--- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
+++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
@@ -242,6 +242,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
+  // Apply dark style overrides to scrollbar when system is in dark mode and app theme is not set to light
+  html:has(.ember-application:not(.rose-theme-light)) {
+    scrollbar-color: var(--token-color-palette-neutral-400)
+      var(--token-color-palette-neutral-600);
+  }
+
   .ember-application:not(.rose-theme-light) {
     @include dark-mode;
     @include dark-mode-modal-override;
@@ -252,6 +258,12 @@
   }
 }
 
+// Apply dark style overrides to scrollbar when app theme is set to dark regardless of system theme
+html:has(.ember-application.rose-theme-dark) {
+  scrollbar-color: var(--token-color-palette-neutral-400)
+    var(--token-color-palette-neutral-600);
+}
+
 .ember-application.rose-theme-dark {
   @include dark-mode;
   @include dark-mode-modal-override;
diff --git a/addons/rose/app/styles/rose/components/layout/_page.scss b/addons/rose/app/styles/rose/components/layout/_page.scss
index 367d97bfd..862d83717 100644
--- a/addons/rose/app/styles/rose/components/layout/_page.scss
+++ b/addons/rose/app/styles/rose/components/layout/_page.scss
@@ -12,7 +12,7 @@
     'header header header'
     'navigation navigation navigation'
     'body body body';
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, auto);
   grid-template-rows: auto 1fr;
 
   .rose-layout-page-header {
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index f2664d71b..d5e121afa 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -335,7 +335,6 @@
       background: transparent;
       border: transparent;
       color: var(--white);
-      margin: sizing.rems(xs);
     }
 
     .button-window-close {