fix(pin) no pin on mobile

Author: rwieruch

.storybook/stories/Compact/fixed-column.js

@@ -13,30 +13,30 @@ const Component = () => {
 
   const theme = useTheme({
     BaseCell: `
-        &:nth-of-type(1) {
-          left: 0px;
-
-          min-width: 250px;
-          width: 250px;
-        }
-
-        &:nth-of-type(2) {
-          left: 250px;
-
-          min-width: 150px;
-          width: 150px;
-        }
-
-        &:nth-of-type(3) {
-          min-width: 20%;
-          width: 20%;
-        }
-
-        &:nth-of-type(4), &:nth-of-type(5) {
-          min-width: 700px;
-          width: 700px;
-        }
-      `,
+      &:nth-of-type(1) {
+        left: 0px;
+
+        min-width: 250px;
+        width: 250px;
+      }
+
+      &:nth-of-type(2) {
+        left: 250px;
+
+        min-width: 150px;
+        width: 150px;
+      }
+
+      &:nth-of-type(3) {
+        min-width: 20%;
+        width: 20%;
+      }
+
+      &:nth-of-type(4), &:nth-of-type(5) {
+        min-width: 700px;
+        width: 700px;
+      }
+    `,
   });
 
   const COLUMNS = [

.storybook/stories/Features/fixed-header.story.js

@@ -88,7 +88,7 @@ storiesOf('Features/Fixed Header', module)
 
     return (
       // check .storybook/preview.js for body style
-      <>
+      <div style={{ height: '100vh' }}>
         <div
           style={{
             height: '40%',
@@ -150,7 +150,7 @@ storiesOf('Features/Fixed Header', module)
         >
           Some Footer
         </div>
-      </>
+      </div>
     );
   })
   .add('in flex container', () => {
@@ -164,10 +164,10 @@ storiesOf('Features/Fixed Header', module)
 
     return (
       // check .storybook/preview.js for body style
-      <>
+      <div style={{ height: '100vh' }}>
         <div
           style={{
-            height: '40%',
+            height: '40vh',
             border: '1px solid black',
             display: 'flex',
             justifyContent: 'center',
@@ -178,6 +178,7 @@ storiesOf('Features/Fixed Header', module)
         </div>
         <div
           style={{
+            height: '20vh',
             flex: '1',
             display: 'flex',
             flexDirection: 'column',
@@ -233,7 +234,7 @@ storiesOf('Features/Fixed Header', module)
         </div>
         <div
           style={{
-            height: '40%',
+            height: '40vh',
             border: '1px solid black',
             display: 'flex',
             justifyContent: 'center',
@@ -242,7 +243,7 @@ storiesOf('Features/Fixed Header', module)
         >
           Some Footer
         </div>
-      </>
+      </div>
     );
   })
   .add('documentation', () => (

.storybook/stories/Introduction/demo.story.js

@@ -43,6 +43,15 @@ const queryClient = new QueryClient();
 
 const twoDecimals = (integer) => Number((Math.round(integer * 100) / 100).toFixed(2));
 
+const disablePin = `
+  @media screen and (max-width: 480px) {
+    &.pin-left, &.pin-right {
+      position: static;
+      z-index: 1;
+    }
+  }
+`;
+
 const CUSTOM_SHARED_THEME = {
   HeaderRow: `
     font-size: 12px;
@@ -59,6 +68,8 @@ const CUSTOM_SHARED_THEME = {
     padding-top: 14px;
     padding-bottom: 14px;
 
+    ${disablePin}
+
     min-width: 20%;
     width: 20%;