From 4156fb5d7faf1f998b91d9f4fe891d8af580be2a Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Fri, 21 Feb 2025 12:55:43 +0100
Subject: [PATCH] Hide the scrollbars only in Safari

---
 pages/app/index.tsx   | 12 +++++++-----
 pages/app/styles.scss |  4 ++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/app/index.tsx b/pages/app/index.tsx
index 2c68648caf..a8c33eb18d 100644
--- a/pages/app/index.tsx
+++ b/pages/app/index.tsx
@@ -57,7 +57,9 @@ function App() {
   // Also, AppLayout pages should resemble the ConsoleNav 2.0 styles
   const isAppLayout = isAppLayoutPage(pageId);
   const ContentTag = isAppLayout ? 'div' : 'main';
-  const isMacOS = navigator.userAgent.toLowerCase().indexOf('macintosh') > -1;
+
+  const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
+  const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;
 
   useEffect(() => {
     applyMode(mode ?? null);
@@ -72,12 +74,12 @@ function App() {
   }, [motionDisabled]);
 
   useEffect(() => {
-    if (isMacOS) {
-      document.body.classList.add(styles.macos);
+    if (isSafari) {
+      document.body.classList.add(styles.safari);
     } else {
-      document.body.classList.remove(styles.macos);
+      document.body.classList.remove(styles.safari);
     }
-  }, [isMacOS]);
+  }, [isSafari]);
 
   if (!mode) {
     return <Redirect to="/light/" />;
diff --git a/pages/app/styles.scss b/pages/app/styles.scss
index 630cab82ee..d23b8a4c1b 100644
--- a/pages/app/styles.scss
+++ b/pages/app/styles.scss
@@ -21,8 +21,8 @@ body {
   }
   // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type
 
-  html:has(&.macos) {
-    // override scrollbars in macos for stable screenshot tests
+  html:has(&.safari) {
+    // Hide scrollbars in Safari for stable screenshot tests
     // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant
     ::-webkit-scrollbar {
       inline-size: 0;