From 5d868acc351f67ba5c1c8d76b2533b3bb1ea9c92 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 13 May 2022 11:37:02 -0700
Subject: [PATCH] Allow the login background to expand past viewport height

On safari the right side image can expand past the viewport
height.
---
 packages/web/components/templates/LoginForm.tsx   | 1 -
 packages/web/components/templates/LoginLayout.tsx | 9 ++-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/templates/LoginForm.tsx b/packages/web/components/templates/LoginForm.tsx
index 504ac6089..48996afcb 100644
--- a/packages/web/components/templates/LoginForm.tsx
+++ b/packages/web/components/templates/LoginForm.tsx
@@ -8,7 +8,6 @@ import {
   appleAuthRedirectURI,
 } from '../../lib/appConfig'
 import AppleLogin from 'react-apple-login'
-import { formatMessage } from '../../locales/en/messages'
 
 export type LoginFormProps = {
   errorMessage?: string
diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx
index e655d49ca..5caac8b52 100644
--- a/packages/web/components/templates/LoginLayout.tsx
+++ b/packages/web/components/templates/LoginLayout.tsx
@@ -1,14 +1,8 @@
 import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { LoginForm } from './LoginForm'
 import type { LoginFormProps } from './LoginForm'
-import Image from 'next/image'
 import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { theme } from '../tokens/stitches.config'
-import Link from 'next/link'
-import { Star } from 'phosphor-react'
-import { Button } from '../elements/Button'
-import { googleID } from '../../lib/appConfig'
-import { useEffect, useState } from 'react'
 
 export function LoginLayout(props: LoginFormProps): JSX.Element {
   return (
@@ -64,8 +58,9 @@ function MediumLoginLayout(props: LoginFormProps) {
       alignment="center"
       distribution="start"
       css={{
-        height: '100vh',
         width: '100vw',
+        height: '100%',
+        minHeight: '100vh',
         bg: '$omnivoreYellow',
         overflowY: 'clip'
       }}