make sure auth views are full screen (#8090)

frontend/src/metabase/auth/AuthApp.jsx

+import fitViewPort from "metabase/hoc/FitViewPort";
+
+// Auth components expect a full viewport experience to center most of the pages
+const AuthApp = ({ children }) => children;
+
+export default fitViewPort(AuthApp);

frontend/src/metabase/auth/containers/LoginApp.jsx

@@ -112,7 +112,7 @@ export default class LoginApp extends Component {
     const ldapEnabled = Settings.ldapEnabled();
 
     return (
-      <div className="viewport-height full bg-white flex flex-column flex-full md-layout-centered">
+      <div className="full bg-white flex flex-column flex-full md-layout-centered">
         <div className="Login-wrapper wrapper Grid Grid--full md-Grid--1of2 relative z2">
           <div className="Grid-cell flex layout-centered text-brand">
             <LogoIcon className="Logo my4 sm-my0" width={66} height={85} />

frontend/src/metabase/css/core/layout.css

@@ -33,11 +33,6 @@
   height: 100%;
 }
 
-/* set height to that of the viewport */
-.viewport-height {
-  height: 100vh;
-}
-
 /* display utilities */
 .block,
 :local(.block) {

frontend/src/metabase/routes.jsx

@@ -16,6 +16,7 @@ import App from "metabase/App.jsx";
 import HomepageApp from "metabase/home/containers/HomepageApp";
 
 // auth containers
+import AuthApp from "metabase/auth/AuthApp";
 import ForgotPasswordApp from "metabase/auth/containers/ForgotPasswordApp.jsx";
 import LoginApp from "metabase/auth/containers/LoginApp.jsx";
 import LogoutApp from "metabase/auth/containers/LogoutApp.jsx";
@@ -177,7 +178,7 @@ export const getRoutes = store => (
       }}
     >
       {/* AUTH */}
-      <Route path="/auth">
+      <Route path="/auth" component={AuthApp}>
         <IndexRedirect to="/auth/login" />
         <Route component={IsNotAuthenticated}>
           <Route path="login" title={t`Login`} component={LoginApp} />