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

src/home/UnauthenticatedView.tsx

@@ -148,6 +148,7 @@ export const UnauthenticatedView: FC = () => {
 
   return (
     <>
+      <div className={commonStyles.container}>
         <Header>
           <LeftNav>
             <HeaderLogo />
@@ -156,7 +157,6 @@ export const UnauthenticatedView: FC = () => {
             <UserMenuContainer />
           </RightNav>
         </Header>
-      <div className={commonStyles.container}>
         <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);
-  }
 }