FIX some tabs issues

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -6052,6 +6052,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-99 > *:first-child {
@@ -6538,6 +6544,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-99 > *:first-child {
@@ -6872,6 +6884,9 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   transform: none;
 }
 
+<div
+  style="position:relative;height:calc(100vh);width:calc(100vw)"
+>
   <div
     class="emotion-100"
   >
@@ -7409,6 +7424,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `

lib/components/src/tabs/__snapshots__/tabs.stories.storyshot

@@ -157,17 +157,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
   display: block;
   position: relative;
   font-size: 13px;
-  height: auto;
-}
-
-.emotion-11 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
 }
 
 .emotion-10 {
@@ -175,7 +164,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-12"
@@ -507,17 +496,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
   display: block;
   position: relative;
   font-size: 13px;
-  height: auto;
-}
-
-.emotion-11 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
 }
 
 .emotion-10 {
@@ -525,7 +503,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-12"
@@ -813,21 +791,10 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
   display: block;
   position: relative;
   font-size: 13px;
-  height: auto;
-}
-
-.emotion-7 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-6"
@@ -1074,6 +1041,12 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-11 > *:first-child {
@@ -1093,6 +1066,8 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 .emotion-12 {
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.1);
+  border-radius: 4px;
+  overflow: hidden;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -1106,7 +1081,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-12"
@@ -1434,17 +1409,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
   display: block;
   position: relative;
   font-size: 13px;
-  height: auto;
-}
-
-.emotion-11 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
 }
 
 .emotion-10 {
@@ -1454,11 +1418,13 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
 .emotion-12 {
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.1);
+  border-radius: 4px;
+  overflow: hidden;
   display: block;
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-12"
@@ -1646,7 +1612,7 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-1"
@@ -1836,17 +1802,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
   display: block;
   position: relative;
   font-size: 13px;
-  height: auto;
-}
-
-.emotion-12 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
 }
 
 .emotion-11 {
@@ -1854,7 +1809,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
 }
 
 <div
-  style="height:calc(100vh - 20px)"
+  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
 >
   <div
     class="emotion-13"

lib/components/src/tabs/tabs.js

@@ -11,8 +11,9 @@ const Wrapper = styled.div(
     bordered
       ? {
           backgroundClip: 'padding-box',
-          borderRadius: theme.borderRadius,
           border: `1px solid ${theme.appBorderColor}`,
+          borderRadius: theme.appBorderRadius,
+          overflow: 'hidden',
         }
       : {},
   ({ absolute }) =>
@@ -45,8 +46,17 @@ const Content = styled.div(
   ({ theme }) => ({
     fontSize: theme.typography.size.s2 - 1,
   }),
-  ({ absolute }) => ({
+  ({ absolute }) =>
-    height: absolute ? 'calc(100% - 40px)' : 'auto',
+    absolute
+      ? {
+          height: 'calc(100% - 40px)',
+
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 40,
+          overflow: 'auto',
           '& > *:first-child': {
             position: 'absolute',
             left: 0,
@@ -56,7 +66,8 @@ const Content = styled.div(
             height: '100%',
             overflow: 'auto',
           },
-  })
+        }
+      : {}
 );
 
 const VisuallyHidden = styled.div(({ active }) =>

lib/components/src/tabs/tabs.stories.js

@@ -110,7 +110,18 @@ const content = Object.entries(panels).map(([k, v]) => (
 ));
 
 storiesOf('Basics|Tabs', module)
-  .addDecorator(s => <div style={{ height: 'calc(100vh - 20px)' }}>{s()}</div>)
+  .addDecorator(s => (
+    <div
+      style={{
+        position: 'relative',
+        height: 'calc(100vh - 20px)',
+        width: 'calc(100vw - 20px)',
+        margin: 10,
+      }}
+    >
+      {s()}
+    </div>
+  ))
   .add('stateful - static', () => (
     <TabsState initial="test2">
       <div id="test1" title="With a function">

lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot

@@ -227,6 +227,12 @@ exports[`Storyshots UI|Panel default 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-13 > *:first-child {

lib/ui/src/settings/__snapshots__/about.stories.storyshot

@@ -153,6 +153,12 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-25 > *:first-child {
@@ -364,6 +370,9 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   text-align: center;
 }
 
+<div
+  style="position:relative;height:calc(100vh);width:calc(100vw)"
+>
   <div
     class="emotion-26"
   >
@@ -561,6 +570,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
@@ -716,6 +726,12 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-41 > *:first-child {
@@ -1644,6 +1660,9 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   outline: 0 none;
 }
 
+<div
+  style="position:relative;height:calc(100vh);width:calc(100vw)"
+>
   <div
     class="emotion-42"
   >
@@ -2029,6 +2048,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
@@ -2184,6 +2204,12 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
   position: relative;
   font-size: 13px;
   height: calc(100% - 40px);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 40px;
+  overflow: auto;
 }
 
 .emotion-27 > *:first-child {
@@ -2875,6 +2901,9 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
   border-radius: 3px;
 }
 
+<div
+  style="position:relative;height:calc(100vh);width:calc(100vw)"
+>
   <div
     class="emotion-28"
   >
@@ -3098,4 +3127,5 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;

lib/ui/src/settings/about.stories.js

@@ -10,6 +10,17 @@ const info = {
 
 const actions = createActions('onClose');
 storiesOf('UI|Settings/AboutScreen', module)
+  .addDecorator(s => (
+    <div
+      style={{
+        position: 'relative',
+        height: 'calc(100vh)',
+        width: 'calc(100vw)',
+      }}
+    >
+      {s()}
+    </div>
+  ))
   .add('up to date', () => (
     <AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.0' }} {...actions} />
   ))

lib/ui/src/settings/shortcuts.stories.js

@@ -14,6 +14,19 @@ const actions = makeActions(
 export default {
   component: ShortcutsScreen,
   title: 'UI|Settings/ShortcutsScreen',
+  decorators: [
+    s => (
+      <div
+        style={{
+          position: 'relative',
+          height: 'calc(100vh)',
+          width: 'calc(100vw)',
+        }}
+      >
+        {s()}
+      </div>
+    ),
+  ],
 };
 
 export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;