From 348782eab7982c32615fb0526ac5c253e608f0e0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 14 May 2019 16:07:32 +0200
Subject: [PATCH 1/2] FIX

---
 .../src/ScrollArea/ScrollArea.stories.tsx     | 17 ++++++-
 lib/components/src/ScrollArea/ScrollArea.tsx  |  2 +
 .../src/ScrollArea/ScrollAreaStyles.tsx       | 50 +++++--------------
 3 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/lib/components/src/ScrollArea/ScrollArea.stories.tsx b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
index 93e558795458..349024ae9ce2 100644
--- a/lib/components/src/ScrollArea/ScrollArea.stories.tsx
+++ b/lib/components/src/ScrollArea/ScrollArea.stories.tsx
@@ -17,8 +17,8 @@ const Block = styled.span({
 const Wrapper = styled.div({
   whiteSpace: 'nowrap',
   lineHeight: '0px',
-  maxWidth: 500,
-  maxHeight: 500,
+  width: 500,
+  height: 500,
   overflow: 'hidden',
 });
 
@@ -70,3 +70,16 @@ export const both = () => (
     ))}
   </ScrollArea>
 );
+
+export const withOuterBorder = () => (
+  <ScrollArea horizontal vertical>
+    <div
+      style={{
+        width: 2000,
+        height: 2000,
+        border: '10px solid orangered',
+        background: `url('data:image/png;base64,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')`,
+      }}
+    />
+  </ScrollArea>
+);
diff --git a/lib/components/src/ScrollArea/ScrollArea.tsx b/lib/components/src/ScrollArea/ScrollArea.tsx
index c95b5c6fffa7..10a289b64e64 100644
--- a/lib/components/src/ScrollArea/ScrollArea.tsx
+++ b/lib/components/src/ScrollArea/ScrollArea.tsx
@@ -21,6 +21,7 @@ const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <Simpl
         }
       : {
           overflowY: 'auto',
+          height: '100%',
         },
   ({ horizontal }) =>
     !horizontal
@@ -29,6 +30,7 @@ const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <Simpl
         }
       : {
           overflowX: 'auto',
+          width: '100%',
         }
 );
 
diff --git a/lib/components/src/ScrollArea/ScrollAreaStyles.tsx b/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
index 33ea5986a4af..fb8165f019dc 100644
--- a/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
+++ b/lib/components/src/ScrollArea/ScrollAreaStyles.tsx
@@ -8,10 +8,6 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
     justifyContent: 'flex-start',
     alignContent: 'flex-start',
     alignItems: 'flex-start',
-    width: 'inherit',
-    height: 'inherit',
-    maxWidth: 'inherit',
-    maxHeight: 'inherit',
   },
 
   '.simplebar-wrapper': {
@@ -39,7 +35,6 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
 
   '.simplebar-offset': {
     direction: 'inherit !important' as 'inherit',
-    boxSizing: 'inherit !important' as 'inherit',
     resize: 'none !important' as 'none',
     position: 'absolute',
     top: 0,
@@ -51,18 +46,11 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
     WebkitOverflowScrolling: 'touch',
   },
 
-  '.simplebar-content': {
+  '.simplebar-content-wrapper': {
     direction: 'inherit',
-    boxSizing: 'border-box !important' as 'border-box',
     position: 'relative',
     display: 'block',
-    height:
-      '100% /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */',
-    width: 'auto',
     visibility: 'visible',
-    overflow: 'scroll',
-    maxWidth: '100% /* Not required for horizontal scroll to trigger */',
-    maxHeight: '100% /* Needed for vertical scroll to trigger */',
   },
 
   '.simplebar-placeholder': {
@@ -73,7 +61,6 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
   },
 
   '.simplebar-height-auto-observer-wrapper': {
-    boxSizing: 'inherit !important' as 'inherit',
     height: '100%',
     width: 'inherit',
     maxWidth: 1,
@@ -91,7 +78,6 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
   },
 
   '.simplebar-height-auto-observer': {
-    boxSizing: 'inherit',
     display: 'block',
     opacity: 0,
     position: 'absolute',
@@ -112,36 +98,39 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
     right: 0,
     bottom: 0,
     pointerEvents: 'none',
+    overflow: 'hidden',
+  },
+
+  '[data-simplebar].simplebar-dragging .simplebar-track': {
+    pointerEvents: 'all',
   },
 
   '.simplebar-scrollbar': {
     position: 'absolute',
     right: 2,
-    width: 6,
+    width: 7,
     minHeight: 10,
   },
 
   '.simplebar-scrollbar:before': {
     position: 'absolute',
     content: '""',
-    borderRadius: 6,
+    background: 'black',
+    borderRadius: 7,
     left: 0,
     right: 0,
     opacity: 0,
     transition: 'opacity 0.2s linear',
-    background: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
   },
 
   '.simplebar-track .simplebar-scrollbar.simplebar-visible:before': {
-    /* When hovered, remove all transitions from drag handle */
-    opacity: 0.2,
+    opacity: 0.5,
     transition: 'opacity 0s linear',
   },
 
   '.simplebar-track.simplebar-vertical': {
     top: 0,
-    width: 10,
-    right: 0,
+    width: 11,
   },
 
   '.simplebar-track.simplebar-vertical .simplebar-scrollbar:before': {
@@ -151,8 +140,7 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
 
   '.simplebar-track.simplebar-horizontal': {
     left: 0,
-    height: 10,
-    bottom: 0,
+    height: 11,
   },
 
   '.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before': {
@@ -165,26 +153,14 @@ export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Them
     right: 'auto',
     left: 0,
     top: 2,
-    height: 6,
+    height: 7,
     minHeight: 0,
     minWidth: 10,
     width: 'auto',
   },
 
-  /* Rtl support */
   '[data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical': {
     right: 'auto',
     left: 0,
   },
-
-  '.hs-dummy-scrollbar-size': {
-    direction: 'rtl',
-    position: 'fixed',
-    opacity: 0,
-    visibility: 'hidden',
-    height: 500,
-    width: 500,
-    overflowY: 'hidden',
-    overflowX: 'scroll',
-  },
 });

From a3576cb7a96f834c866b21bd29b7458c830218d6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 14 May 2019 16:59:20 +0200
Subject: [PATCH 2/2] FIX snapshots

---
 .../__snapshots__/A11YPanel.test.js.snap      |  78 +++++------
 .../addon-info.stories.storyshot              |   8 ++
 .../__snapshots__/storyshots.test.js.snap     | 127 ++++++++++++++++--
 .../syntaxhighlighter.stories.storyshot       |  12 ++
 .../tabs/__snapshots__/tabs.stories.storyshot |   6 +
 .../__snapshots__/panel.stories.storyshot     |   1 +
 .../__snapshots__/preview.stories.storyshot   |   2 +
 .../__snapshots__/about.stories.storyshot     |   5 +
 8 files changed, 189 insertions(+), 50 deletions(-)

diff --git a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
index fd6ba69231f6..491016a4c4a7 100644
--- a/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
@@ -105,7 +105,9 @@ exports[`A11YPanel should render loader when it's running 1`] = `
 exports[`A11YPanel should render report 1`] = `
 .emotion-0 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
 }
 
 .emotion-4 {
@@ -215,7 +217,6 @@ exports[`A11YPanel should render report 1`] = `
                 "110qmus": true,
                 "1551xjo": true,
                 "15paq49": true,
-                "176o2y5": true,
                 "1977chw": true,
                 "19mcg9j": true,
                 "1ez3l8h": true,
@@ -225,6 +226,7 @@ exports[`A11YPanel should render report 1`] = `
                 "1vwgrhn": true,
                 "4ryd4s": true,
                 "6hqipu": true,
+                "6z0ulf": true,
                 "animation-u07e3c": true,
                 "aq4p19": true,
                 "fg630j": true,
@@ -241,9 +243,9 @@ exports[`A11YPanel should render report 1`] = `
               "key": "css",
               "nonce": undefined,
               "registered": Object {
-                "emotion-0": "overflow-y:auto;overflow-x:auto;",
                 "css-1977chw": "height:10px;width:10px;min-width:10px;color:#999999;margin-right:10px;transition:transform 0.1s ease-in-out;align-self:center;display:inline-flex;",
                 "css-1l7fvsg": "height:12px;width:12px;margin-right:4px;",
+                "emotion-0": "overflow-y:auto;height:100%;overflow-x:auto;width:100%;",
                 "css-jb2puo": "height:12px;width:12px;margin-right:4px;animation:animation-u07e3c 1s linear infinite;;",
                 "css-tkevr6": "display:flex;align-items:center;justify-content:center;height:100%;",
               },
@@ -254,7 +256,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css-global"
                   >
                     
-                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
+                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                   </style>
                   <style
                     data-emotion="css-global"
@@ -272,13 +274,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-offset{direction:inherit !important;box-sizing:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
+                    .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-content{direction:inherit;box-sizing:border-box !important;position:relative;display:block;height:100%;width:auto;visibility:visible;overflow:scroll;max-width:100%;max-height:100%;}
+                    .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                   </style>
                   <style
                     data-emotion="css-global"
@@ -290,85 +292,85 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-height-auto-observer-wrapper{box-sizing:inherit !important;height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
+                    .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
+                    .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;}
+                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-scrollbar{position:absolute;right:2px;width:6px;min-height:10px;}
+                    [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-scrollbar:before{position:absolute;content:"";border-radius:6px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
+                    .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.2;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
+                    .simplebar-scrollbar:before{position:absolute;content:"";background:black;border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-vertical{top:0;width:10px;right:0;}
+                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
+                    .simplebar-track.simplebar-vertical{top:0;width:11px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal{left:0;height:10px;bottom:0;}
+                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
+                    .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:6px;min-height:0;min-width:10px;width:auto;}
+                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
+                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;}
+                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}
+                    [data-simplebar]{position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
                   </style>
                   <style
                     data-emotion="css-global"
@@ -386,13 +388,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-offset{direction:inherit !important;box-sizing:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
+                    .simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-content{direction:inherit;box-sizing:border-box !important;position:relative;display:block;height:100%;width:auto;visibility:visible;overflow:scroll;max-width:100%;max-height:100%;}
+                    .simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}
                   </style>
                   <style
                     data-emotion="css-global"
@@ -404,85 +406,85 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-height-auto-observer-wrapper{box-sizing:inherit !important;height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
+                    .simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;-webkit-box-flex:inherit;-webkit-flex-grow:inherit;-ms-flex-positive:inherit;flex-grow:inherit;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
+                    .simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;}
+                    .simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-scrollbar{position:absolute;right:2px;width:6px;min-height:10px;}
+                    [data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-scrollbar:before{position:absolute;content:"";border-radius:6px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;background:#333333;}
+                    .simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.2;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
+                    .simplebar-scrollbar:before{position:absolute;content:"";background:black;border-radius:7px;left:0;right:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-vertical{top:0;width:10px;right:0;}
+                    .simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;-webkit-transition:opacity 0s linear;transition:opacity 0s linear;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
+                    .simplebar-track.simplebar-vertical{top:0;width:11px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal{left:0;height:10px;bottom:0;}
+                    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
+                    .simplebar-track.simplebar-horizontal{left:0;height:11px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:6px;min-height:0;min-width:10px;width:auto;}
+                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
+                    .simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}
                   </style>
                   <style
                     data-emotion="css-global"
                   >
                     
-                    .hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;}
+                    [data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical{right:auto;left:0;}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .emotion-0{overflow-y:auto;overflow-x:auto;}
+                    .emotion-0{overflow-y:auto;height:100%;overflow-x:auto;width:100%;}
                   </style>
                   <style
                     data-emotion="css"
@@ -708,7 +710,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .emotion-0{overflow-y:auto;overflow-x:auto;}
+                    .emotion-0{overflow-y:auto;height:100%;overflow-x:auto;width:100%;}
                   </style>,
                   <style
                     data-emotion="css"
@@ -921,9 +923,9 @@ exports[`A11YPanel should render report 1`] = `
           serialized={
             Object {
               "map": undefined,
-              "name": "6ym4y",
+              "name": "zqypir",
               "next": undefined,
-              "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;box-sizing:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content{direction:inherit;box-sizing:border-box !important;position:relative;display:block;height:100% /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */;width:auto;visibility:visible;overflow:scroll;max-width:100% /* Not required for horizontal scroll to trigger */;max-height:100% /* Needed for vertical scroll to trigger */;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{box-sizing:inherit !important;height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;}.simplebar-scrollbar{position:absolute;right:2px;width:6px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";border-radius:6px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;background:#333333;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.2;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:10px;right:0;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:10px;bottom:0;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:6px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}.hs-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;}",
+              "styles": "[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start;}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit;}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;left:0;top:0;bottom:0;right:0;width:auto !important;height:auto !important;z-index:0;}.simplebar-offset{direction:inherit !important;resize:none !important;position:absolute;top:0;left:0;bottom:0;right:0;padding:0;margin:0;-webkit-overflow-scrolling:touch;}.simplebar-content-wrapper{direction:inherit;position:relative;display:block;visibility:visible;}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none;}.simplebar-height-auto-observer-wrapper{height:100%;width:inherit;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0;}.simplebar-height-auto-observer{display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1;}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden;}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all;}.simplebar-scrollbar{position:absolute;right:2px;width:7px;min-height:10px;}.simplebar-scrollbar:before{position:absolute;content:\\"\\";background:black;border-radius:7px;left:0;right:0;opacity:0;transition:opacity 0.2s linear;}.simplebar-track .simplebar-scrollbar.simplebar-visible:before{opacity:0.5;transition:opacity 0s linear;}.simplebar-track.simplebar-vertical{top:0;width:11px;}.simplebar-track.simplebar-vertical .simplebar-scrollbar:before{top:2px;bottom:2px;}.simplebar-track.simplebar-horizontal{left:0;height:11px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before{height:100%;left:2px;right:2px;}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{right:auto;left:0;top:2px;height:7px;min-height:0;min-width:10px;width:auto;}[data-simplebar-direction=\\"rtl\\"] .simplebar-track.simplebar-vertical{right:auto;left:0;}",
             }
           }
         />
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 8bb2ec3fcf2e..38d1c48e41de 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1252,7 +1252,9 @@ exports[`Storyshots Addons|Info/Markdown Displays Markdown in description 1`] =
 
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -4612,7 +4614,9 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the parameters with markdow
 
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -5258,7 +5262,9 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
 
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -9500,7 +9506,9 @@ exports[`Storyshots Addons|Info/deprecated Displays Markdown in description 1`]
 
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 38694b527cc6..6da1f644e7f3 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -2538,8 +2538,8 @@ exports[`Storyshots Basics|ScrollArea both 1`] = `
 .emotion-401 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
@@ -2557,14 +2557,16 @@ exports[`Storyshots Basics|ScrollArea both 1`] = `
 
 .emotion-400 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
 }
 
 .emotion-401 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
@@ -2582,7 +2584,9 @@ exports[`Storyshots Basics|ScrollArea both 1`] = `
 
 .emotion-400 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
 }
 
 <div
@@ -4664,8 +4668,8 @@ exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
 .emotion-21 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
@@ -4684,13 +4688,14 @@ exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
 .emotion-20 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
 }
 
 .emotion-21 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
@@ -4709,6 +4714,7 @@ exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
 .emotion-20 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
 }
 
 <div
@@ -4870,13 +4876,14 @@ exports[`Storyshots Basics|ScrollArea vertical 1`] = `
 .emotion-21 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
 .emotion-20 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
@@ -4895,13 +4902,14 @@ exports[`Storyshots Basics|ScrollArea vertical 1`] = `
 .emotion-21 {
   white-space: nowrap;
   line-height: 0px;
-  max-width: 500px;
-  max-height: 500px;
+  width: 500px;
+  height: 500px;
   overflow: hidden;
 }
 
 .emotion-20 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
@@ -5092,6 +5100,95 @@ exports[`Storyshots Basics|ScrollArea vertical 1`] = `
 </div>
 `;
 
+exports[`Storyshots Basics|ScrollArea withOuterBorder 1`] = `
+.emotion-1 {
+  white-space: nowrap;
+  line-height: 0px;
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+}
+
+.emotion-0 {
+  overflow-y: auto;
+  height: 100%;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.emotion-1 {
+  white-space: nowrap;
+  line-height: 0px;
+  width: 500px;
+  height: 500px;
+  overflow: hidden;
+}
+
+.emotion-0 {
+  overflow-y: auto;
+  height: 100%;
+  overflow-x: auto;
+  width: 100%;
+}
+
+<div
+  class="emotion-1"
+>
+  <div
+    class="emotion-0"
+    data-simplebar="true"
+  >
+    <div
+      class="simplebar-wrapper"
+    >
+      <div
+        class="simplebar-height-auto-observer-wrapper"
+      >
+        <div
+          class="simplebar-height-auto-observer"
+        />
+      </div>
+      <div
+        class="simplebar-mask"
+      >
+        <div
+          class="simplebar-offset"
+        >
+          <div
+            class="simplebar-content-wrapper"
+          >
+            <div
+              class="simplebar-content"
+            >
+              <div
+                style="width:2000px;height:2000px;border:10px solid orangered;background:url('data:image/png;base64,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')"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="simplebar-placeholder"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-horizontal"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-vertical"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Core|Decorators all 1`] = `
 Array [
   <p>
@@ -5893,6 +5990,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 .emotion-8 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -6385,6 +6483,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 .emotion-8 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -7728,6 +7827,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 
 .emotion-77 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
@@ -8087,6 +8187,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 
 .emotion-77 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
@@ -8866,6 +8967,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 
 .emotion-48 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
@@ -9354,6 +9456,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 
 .emotion-48 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: hidden;
 }
 
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
index a64d29eba110..93be86c3fca9 100644
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -3,7 +3,9 @@
 exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = `
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -280,7 +282,9 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
 
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -771,7 +775,9 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
 exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -1239,7 +1245,9 @@ exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `
 exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = `
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -1677,7 +1685,9 @@ exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = `
 exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -2147,7 +2157,9 @@ exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `
 exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
 .emotion-2 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
index 38f94e45e796..a936ac0a198e 100644
--- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
+++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
@@ -4,6 +4,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
 .emotion-9 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -347,6 +348,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
 .emotion-9 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -646,6 +648,7 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
 .emotion-5 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -903,6 +906,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 .emotion-9 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -1276,6 +1280,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
 .emotion-9 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -1650,6 +1655,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
 .emotion-10 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
index 53ac79a14eb3..e47ade3cbf0d 100644
--- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
+++ b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
@@ -17,6 +17,7 @@ exports[`Storyshots UI|Panel default 1`] = `
 .emotion-12 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
index 6c0bc9320fe5..0f95e084a9ff 100644
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -73,6 +73,7 @@ Array [
 .emotion-23 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -512,6 +513,7 @@ Array [
 .emotion-29 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 32a0682a7f34..59762040f62c 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -17,6 +17,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
 .emotion-8 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -599,6 +600,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
 .emotion-8 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;
@@ -1446,7 +1448,9 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
 
 .emotion-20 {
   overflow-y: auto;
+  height: 100%;
   overflow-x: auto;
+  width: 100%;
   position: relative;
 }
 
@@ -2111,6 +2115,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
 .emotion-8 {
   overflow-y: hidden;
   overflow-x: auto;
+  width: 100%;
   color: #999999;
   width: 100%;
   height: 40px;