Fix home page overflowing by a few pixels

Because the height of our header component changed at some point, the hard-coded height values in the CSS were off by a few px and caused the page to overflow slightly.

src/home/RegisteredView.tsx

@@ -114,15 +114,15 @@ export function RegisteredView({ client }: Props) {
 
   return (
     <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

src/home/UnauthenticatedView.tsx

@@ -148,15 +148,15 @@ export const UnauthenticatedView: FC = () => {
 
   return (
     <>
-      <Header>
-        <LeftNav>
-          <HeaderLogo />
-        </LeftNav>
-        <RightNav hideMobile>
-          <UserMenuContainer />
-        </RightNav>
-      </Header>
       <div className={commonStyles.container}>
+        <Header>
+          <LeftNav>
+            <HeaderLogo />
+          </LeftNav>
+          <RightNav hideMobile>
+            <UserMenuContainer />
+          </RightNav>
+        </Header>
         <main className={commonStyles.main}>
           <HeaderLogo className={commonStyles.logo} />
           <Heading size="lg" weight="semibold">

src/home/common.module.css

@@ -16,7 +16,7 @@ limitations under the License.
 
 .container {
   display: flex;
-  min-height: calc(100% - 64px);
+  min-height: 100%;
   flex-direction: column;
   justify-content: space-between;
 }
@@ -42,8 +42,4 @@ limitations under the License.
   .logo {
     display: none;
   }
-
-  .container {
-    min-height: calc(100% - 76px);
-  }
 }