fix(Popover): popover bottom position issue (#2540)

kiwicom · Nov 27, 2020 · 4b251ad · 4b251ad
1 parent cebf8d8
commit 4b251ad
Showing 1 changed file with 4 additions and 9 deletions.
diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.js b/packages/orbit-components/src/Popover/components/ContentWrapper.js
@@ -26,29 +26,24 @@ const { useRef, useEffect, useContext, useMemo, useCallback } = React;
 const mobileTop = theme => theme.orbit.spaceXLarge;
 const popoverPadding = theme => theme.orbit.spaceMedium;
 
-const StyledContentWrapper = styled.div.attrs(props => ({
-  style: {
-    bottom: props.actionsHeight ? props.actionsHeight : 0,
-    // Calculates all the spacing relative to viewport to get space for action box
-    // 32 here is the fixed gap from the top, same with modal.
-    maxHeight: `${props.windowHeight - props.actionsHeight - 32}px`,
-  },
-}))`
+const StyledContentWrapper = styled.div`
   overflow: auto;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   position: absolute;
   left: 0;
   width: 100%;
   background-color: ${({ theme }) => theme.orbit.paletteWhite};
+  max-height: ${({ windowHeight, actionsHeight }) => `${windowHeight - actionsHeight - 32}px`};
+  bottom: ${({ actionsHeight }) => actionsHeight || 0}px;
 
   ${media.largeMobile(css`
     max-height: 100%;
     border-radius: 3px;
     bottom: auto;
     left: auto;
     position: relative;
-  `)};
+  `)}
 `;
 
 StyledContentWrapper.defaultProps = {