Revert "chore: Do not hide scrollbars in dev pages in Mac OS (#3168)"

This reverts commit f9aeff8.

pages/app/index.tsx

@@ -16,7 +16,7 @@ import StrictModeWrapper from './components/strict-mode-wrapper';
 // import font-size reset and Ember font
 import '@cloudscape-design/global-styles/index.css';
 // screenshot test overrides
-import './styles.scss';
+import styles from './styles.scss';
 
 interface GlobalFlags {
   appLayoutWidget?: boolean;
@@ -57,6 +57,7 @@ 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;
 
   useEffect(() => {
     applyMode(mode ?? null);
@@ -70,6 +71,14 @@ function App() {
     disableMotion(motionDisabled);
   }, [motionDisabled]);
 
+  useEffect(() => {
+    if (isMacOS) {
+      document.body.classList.add(styles.macos);
+    } else {
+      document.body.classList.remove(styles.macos);
+    }
+  }, [isMacOS]);
+
   if (!mode) {
     return <Redirect to="/light/" />;
   }

pages/app/styles.scss

@@ -20,6 +20,15 @@ body {
     caret-color: transparent !important;
   }
   // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type
+
+  &.macos {
+    // override scrollbars in macos for stable screenshot tests
+    // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant
+    ::-webkit-scrollbar {
+      inline-size: 0;
+      block-size: 0;
+    }
+  }
 }
 
 /*