fix: 🐛 scrollbar color in dark mode + layout bugs (#3226)

* 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

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;

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 {