From 28bed69b2e7f0526f5197032b442c9f77a15a998 Mon Sep 17 00:00:00 2001
From: "akash.dutta" <akash.dutta@glosity.club>
Date: Thu, 12 May 2022 15:10:24 +0530
Subject: [PATCH] login page vertically responsive

---
 dashboard/src/layouts/AuthLayout.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/dashboard/src/layouts/AuthLayout.tsx b/dashboard/src/layouts/AuthLayout.tsx
index ff179e9..5f551bb 100644
--- a/dashboard/src/layouts/AuthLayout.tsx
+++ b/dashboard/src/layouts/AuthLayout.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Text, Spinner, useMediaQuery } from '@chakra-ui/react';
+import { Box, Flex, Image, Text, Spinner, useMediaQuery, Stack } from '@chakra-ui/react';
 import React from 'react';
 import { useQuery } from 'urql';
 import { MetaQuery } from '../graphql/queries';
@@ -6,8 +6,16 @@ import { MetaQuery } from '../graphql/queries';
 export function AuthLayout({ children }: { children: React.ReactNode }) {
 	const [{ fetching, data }] = useQuery({ query: MetaQuery });
 	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
+	const [isVerticalRes] = useMediaQuery('(max-height:600px)');
 	return (
-		<Flex flexWrap='wrap' h='100vh' bg='gray.100' alignItems='center' justifyContent='center' flexDirection='column'>
+		<Stack
+			h='100vh'
+			bg='gray.100'
+			alignItems='center'
+			justifyContent='center'
+			direction={['column', 'column']}
+			spacing={6}
+		>
 			<Flex alignItems='center'>
 				<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' />
 				<Text fontSize='x-large' ml='3' letterSpacing='3'>
@@ -27,6 +35,6 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 					</Text>
 				</>
 			)}
-		</Flex>
+		</Stack>
 	);
 }