Improve sidebar logic to handle MS Edge, Firefox differences between Windows & Mac

packages/website/ts/pages/documentation/developers_page.tsx

@@ -7,14 +7,31 @@ import { DocsTopBar } from 'ts/components/documentation/docs_top_bar';
 import { Container } from 'ts/components/ui/container';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { styled } from 'ts/style/theme';
-import { BrowserType, ScreenWidths } from 'ts/types';
+import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
 const THROTTLE_TIMEOUT = 100;
 const TOP_BAR_HEIGHT = 80;
 const browserType = utils.getBrowserType();
-const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4;
+let SCROLLBAR_WIDTH;
+switch (browserType) {
+    case BrowserType.Firefox:
+        // HACK: Firefox doesn't allow styling of their scrollbar's.
+        // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
+        const os = utils.getOperatingSystem();
+        SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15;
+        break;
+
+    case BrowserType.Edge:
+        // Edge's scrollbar is placed outside of the div content and doesn't
+        // need to be accounted for
+        SCROLLBAR_WIDTH = 0;
+        break;
+
+    default:
+        SCROLLBAR_WIDTH = 4;
+}
 const SIDEBAR_PADDING = 22;
 
 export interface DevelopersPageProps {
@@ -34,13 +51,14 @@ const isUserOnMobile = sharedUtils.isUserOnMobile();
 
 const scrollableContainerStyles = `
     position: absolute;
-    top: 80px;
+    top: ${TOP_BAR_HEIGHT}px;
     left: 0px;
     bottom: 0px;
     right: 0px;
     overflow-x: hidden;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
+    /* Required for hide/show onHover of scrollbar on Microsoft Edge */
     -ms-overflow-style: -ms-autohiding-scrollbar;
 `;
 
@@ -60,7 +78,7 @@ const SidebarContainer =
     overflow: hidden;
     &:hover {
         overflow: auto;
-        padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px;
+        padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px;
     }
 `;
 
@@ -78,14 +96,14 @@ const MainContentContainer =
     padding-right: 50px;
     overflow: ${isUserOnMobile ? 'auto' : 'hidden'};
     &:hover {
-        padding-right: ${50 - SCROLLER_WIDTH}px;
+        padding-right: ${50 - SCROLLBAR_WIDTH}px;
         overflow: auto;
     }
     @media (max-width: 40em) {
         padding-left: 20px;
         padding-right: 20px;
         &:hover {
-            padding-right: ${20 - SCROLLER_WIDTH}px;
+            padding-right: ${20 - SCROLLBAR_WIDTH}px;
             overflow: auto;
         }
     }

packages/website/ts/types.ts

@@ -590,6 +590,8 @@ export enum BrowserType {
     Chrome = 'Chrome',
     Firefox = 'Firefox',
     Opera = 'Opera',
+    Safari = 'Safari',
+    Edge = 'Edge',
     Other = 'Other',
 }
 

packages/website/ts/utils/utils.ts

@@ -413,6 +413,10 @@ export const utils = {
             return BrowserType.Firefox;
         } else if (bowser.opera) {
             return BrowserType.Opera;
+        } else if (bowser.msedge) {
+            return BrowserType.Edge;
+        } else if (bowser.safari) {
+            return BrowserType.Safari;
         } else {
             return BrowserType.Other;
         }