From 89d2bb7ecd7019ba36e7cff1429a2bdadea2a4c2 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 22 Jun 2018 14:32:21 -0700
Subject: Fix issue where hovered tiles appear over top bar

---
 packages/website/ts/components/portal/portal.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts/components/portal/portal.tsx')

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index c9f2b2633..4166fde53 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -243,8 +243,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                     style={{
                         backgroundColor: colors.lightestGrey,
                         position: 'fixed',
-                        // Hack: used to make onboarding z-index logic work for both mobile and desktop
-                        zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined,
+                        zIndex: zIndex.topBar,
                     }}
                     maxWidth={LARGE_LAYOUT_MAX_WIDTH}
                 />
@@ -696,9 +695,14 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <div className="mx-auto flex flex-center" style={{ maxWidth: LARGE_LAYOUT_MAX_WIDTH }}>
+        <Container className="mx-auto flex flex-center" maxWidth={LARGE_LAYOUT_MAX_WIDTH}>
             <div className="flex-last">
-                <Container width={LEFT_COLUMN_WIDTH} position="fixed" marginLeft={LARGE_LAYOUT_MARGIN}>
+                <Container
+                    width={LEFT_COLUMN_WIDTH}
+                    position="fixed"
+                    zIndex={zIndex.aboveTopBar}
+                    marginLeft={LARGE_LAYOUT_MARGIN}
+                >
                     {props.left}
                 </Container>
             </div>
@@ -707,7 +711,7 @@ const LargeLayout = (props: LargeLayoutProps) => {
                     {props.right}
                 </Container>
             </Container>
-        </div>
+        </Container>
     );
 };
 
-- 
cgit