Merge pull request #368 from kiwicom/fix/modal-overflow-height

FIX: Modal scroll and height
kiwicom · Sep 19, 2018 · df768b7 · df768b7
2 parents b80144f + 24f0427
commit df768b7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 19 deletions.
diff --git a/src/ClickOutside/index.js b/src/ClickOutside/index.js
@@ -6,7 +6,6 @@ import type { Props } from "./index";
 
 const Inner = styled.div`
   width: 100%;
-  height: 100%;
 `;
 
 class ClickOutside extends React.PureComponent<Props> {

diff --git a/src/Modal/ModalHeader/index.js b/src/Modal/ModalHeader/index.js
@@ -59,7 +59,6 @@ const StyledModalHeader = styled.div`
         : `${theme.orbit.spaceXXLarge} ${theme.orbit.spaceXXLarge} ${
             suppressed ? theme.orbit.spaceXXLarge : "0"
           } ${theme.orbit.spaceXXLarge}`};
-    height: 100%;
   `};
 `;
 
@@ -71,7 +70,7 @@ export const MobileHeader = styled.div`
   display: inline-block;
   position: fixed;
   // TODO use token for 52px
-  top: -23px;
+  top: 16px;
   left: 0;
   font-family: ${({ theme }) => theme.orbit.fontFamily};
   font-weight: ${({ theme }) => theme.orbit.fontWeightHeadingDisplay};

diff --git a/src/Modal/__snapshots__/Modal.stories.storyshot b/src/Modal/__snapshots__/Modal.stories.storyshot
@@ -99,20 +99,20 @@ exports[`Storyshots Modal Full preview 1`] = `
           }
         >
           <div
-            className="Modal__ModalBody-jsvBud kztgyo"
+            className="Modal__ModalBody-jsvBud hzGqsV"
             onKeyDown={[Function]}
             tabIndex="0"
           >
             <div
-              className="Modal__ModalWrapper-ioqsnS hfxOQz"
+              className="Modal__ModalWrapper-ioqsnS FaaEz"
               onScroll={[Function]}
               size="normal"
             >
               <div
-                className="ClickOutside__Inner-kPyeco gpqzZD"
+                className="ClickOutside__Inner-kPyeco bbSdlx"
               >
                 <div
-                  className="Modal__ModalWrapperContent-dXDxzA dtGCze"
+                  className="Modal__ModalWrapperContent-dXDxzA knMpbO"
                   size="normal"
                 >
                   <div
@@ -150,7 +150,7 @@ exports[`Storyshots Modal Full preview 1`] = `
                     </button>
                   </div>
                   <div
-                    className="ModalHeader__StyledModalHeader-hOPket etuxfJ"
+                    className="ModalHeader__StyledModalHeader-hOPket gAJYCS"
                   >
                     <img
                       alt="Accommodation"
@@ -178,7 +178,7 @@ exports[`Storyshots Modal Full preview 1`] = `
                       </div>
                     </div>
                     <div
-                      className="ModalHeader__MobileHeader-hyztNg cGevSD"
+                      className="ModalHeader__MobileHeader-hyztNg htMJkr"
                     >
                       Orbit design system
                     </div>
@@ -1489,20 +1489,20 @@ exports[`Storyshots Modal Sizes 1`] = `
           }
         >
           <div
-            className="Modal__ModalBody-jsvBud kztgyo"
+            className="Modal__ModalBody-jsvBud hzGqsV"
             onKeyDown={[Function]}
             tabIndex="0"
           >
             <div
-              className="Modal__ModalWrapper-ioqsnS hfxOQz"
+              className="Modal__ModalWrapper-ioqsnS FaaEz"
               onScroll={[Function]}
               size="normal"
             >
               <div
-                className="ClickOutside__Inner-kPyeco gpqzZD"
+                className="ClickOutside__Inner-kPyeco bbSdlx"
               >
                 <div
-                  className="Modal__ModalWrapperContent-dXDxzA dtGCze"
+                  className="Modal__ModalWrapperContent-dXDxzA knMpbO"
                   size="normal"
                 >
                   <div
@@ -1540,7 +1540,7 @@ exports[`Storyshots Modal Sizes 1`] = `
                     </button>
                   </div>
                   <div
-                    className="ModalHeader__StyledModalHeader-hOPket hLDNUj"
+                    className="ModalHeader__StyledModalHeader-hOPket dJFTgo"
                   >
                     <div
                       className="ModalHeader__ModalTitle-deoNop iOkEWH"
@@ -1557,7 +1557,7 @@ exports[`Storyshots Modal Sizes 1`] = `
                       I'm lovely description
                     </div>
                     <div
-                      className="ModalHeader__MobileHeader-hyztNg cGevSD"
+                      className="ModalHeader__MobileHeader-hyztNg htMJkr"
                     >
                       Orbit design system
                     </div>

diff --git a/src/Modal/index.js b/src/Modal/index.js
@@ -44,7 +44,7 @@ const ModalBody = styled.div`
   font-family: ${({ theme }) => theme.orbit.fontfamily};
 
   ${media.desktop`
-    overflow-y: scroll;
+    overflow-y: auto;
  `};
 `;
 
@@ -59,7 +59,6 @@ const ModalWrapper = styled.div`
   align-items: flex-start;
   margin: 0 auto;
 
-  overflow-y: scroll;
   position: fixed;
   width: 100%;
   border-top-left-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
@@ -69,7 +68,6 @@ const ModalWrapper = styled.div`
 
   ${media.desktop`
     padding: ${({ theme }) => theme.orbit.spaceXXLarge};
-    overflow-y: auto;
     position: relative;
     top: 0;
     max-width: ${({ theme, size }) => getToken(theme, size, "modalWidth")};
@@ -138,7 +136,7 @@ const ModalWrapperContent = styled.div`
       ${({ fixedFooter }) => (fixedFooter ? "76px" : "0px")}
   );
   box-shadow: ${({ theme }) => theme.orbit.boxShadowModal};
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
 
   ${StyledModalSection}:last-of-type {