Resolve Loss of Navigation on smaller screens (#5350)

* Resolve loss of navigation on smaller screens

* Update upper bound of breakpoint to 23em

frontend/src/metabase/css/core/breakpoints.css

 /* TODO: we should really have these as variables */
 
+@custom-media --breakpoint-min-xs (min-width: 23em);
 @custom-media --breakpoint-min-sm (min-width: 40em);
 @custom-media --breakpoint-min-md (min-width: 60em);
 @custom-media --breakpoint-min-lg (min-width: 80em);
 @custom-media --breakpoint-min-xl (min-width: 120em);
 
+@custom-media --breakpoint-max-xs (max-width: 23em);
 @custom-media --breakpoint-max-sm (max-width: 40em);
 @custom-media --breakpoint-max-md (max-width: 60em);
 @custom-media --breakpoint-max-lg (max-width: 80em);

frontend/src/metabase/css/core/hide.css

@@ -8,6 +8,15 @@
 .lg-show,
 .xl-show { display: none; }
 
+/* extra-small */
+
+@media screen and (--breakpoint-min-xs) {
+  .xs-hide { display: none !important; }
+}
+@media screen and (--breakpoint-min-xs) {
+  .xs-show { display: inherit !important; }
+}
+
 /* small */
 
 @media screen and (--breakpoint-min-sm) {

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

@@ -125,10 +125,10 @@ export default class Navbar extends Component {
                             <LogoIcon dark={true}></LogoIcon>
                         </Link>
                     </li>
-                    <li className="pl3 hide sm-show">
+                    <li className="pl3 hide xs-show">
                         <MainNavLink to="/dashboards" name="Dashboards" eventName="Dashboards" />
                     </li>
-                    <li className="pl1 hide sm-show">
+                    <li className="pl1 hide xs-show">
                         <MainNavLink to="/questions" name="Questions" eventName="Questions" />
                     </li>
                     <li className="pl1 hide sm-show">