Merge pull request #8193 from metabase/fix-sidebar-and-nav-bugs

Fix sidebar and nav bugs

frontend/src/metabase/components/SidebarLayout.jsx

@@ -2,6 +2,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import fitViewport from "metabase/hoc/FitViewPort";
+
 const SidebarLayout = ({ className, style, sidebar, children }) => (
   <div
     className={className}
@@ -10,7 +12,7 @@ const SidebarLayout = ({ className, style, sidebar, children }) => (
     {React.cloneElement(
       sidebar,
       {
-        style: { flexShrink: 0 },
+        style: { flexShrink: 0, alignSelf: "stretch" },
         className: "scroll-y scroll-show scroll--light scroll-show--hover",
       },
       sidebar.props.children,
@@ -39,4 +41,4 @@ SidebarLayout.propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-export default SidebarLayout;
+export default fitViewport(SidebarLayout);

frontend/src/metabase/css/home.css

 .Nav {
   z-index: 4;
+  flex-shrink: 0;
 }
 
 .QuestionCircle {

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -180,7 +180,9 @@ export default class Navbar extends Component {
 
   renderAdminNav() {
     return (
-      <nav className={cx("Nav AdminNav sm-py1")}>
+      // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
+      // TODO: hide nav using state in redux instead?
+      <nav className={"Nav AdminNav sm-py1"}>
         <div className="sm-pl4 flex align-center pr1">
           <div className="NavTitle flex align-center">
             <Icon name={"gear"} className="AdminGear" size={22} />
@@ -224,6 +226,8 @@ export default class Navbar extends Component {
 
   renderEmptyNav() {
     return (
+      // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
+      // TODO: hide nav using state in redux instead?
       <nav className="Nav sm-py1 relative">
         <ul className="wrapper flex align-center">
           <li>
@@ -244,7 +248,9 @@ export default class Navbar extends Component {
   renderMainNav() {
     return (
       <Flex
-        className="relative bg-brand text-white z3"
+        // NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
+        // TODO: hide nav using state in redux instead?
+        className="Nav relative bg-brand text-white z3"
         align="center"
         py={1}
         pr={2}