feat: mac specific os styling

usebruno · Aug 6, 2024 · eb1c10f · eb1c10f
1 parent 911e3aa
commit eb1c10f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/bruno-app/src/providers/App/index.js b/packages/bruno-app/src/providers/App/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { get } from 'lodash';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
 import ConfirmAppClose from './ConfirmAppClose';
@@ -18,6 +19,13 @@ export const AppProvider = (props) => {
     dispatch(refreshScreenWidth());
   }, []);
 
+  useEffect(() => {
+    const platform = get(navigator, 'platform', '');
+    if(platform && platform.toLowerCase().indexOf('mac') > -1) {
+      document.body.classList.add('os-mac');
+    }
+  }, []);
+
   useEffect(() => {
     const handleResize = () => {
       dispatch(refreshScreenWidth());

diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
@@ -58,9 +58,12 @@ body::-webkit-scrollbar-thumb,
   border-radius: 5rem;
 }
 
-* {
-  /* This ensures that scrollbars are only visible when the user starts to scroll,
-  providing a cleaner and more minimalistic appearance. */
+/*
+ * Mac-specific scrollbar styling
+ * This ensures that scrollbars are only visible when the user starts to scroll,
+ * providing a cleaner and more minimalistic appearance.
+ */
+body.os-mac * {
   scrollbar-width: thin;
 }