From 466ad972eacdbade9b054f69b1ee6f3810d1c987 Mon Sep 17 00:00:00 2001
From: chriscalhoun1974 <68459950+chriscalhoun1974@users.noreply.github.com>
Date: Fri, 20 Jan 2023 11:30:24 -0500
Subject: [PATCH] 2200 - Home screen header scaling and responsiveness issues
 (#2277)

---
 CHANGELOG.md                             |  3 +++
 clients/admin-ui/src/home/HomeBanner.tsx | 20 ++++++++++----------
 clients/admin-ui/src/home/HomeLayout.tsx |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa709c85db..49538a2c92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,9 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.5.0...main)
 
+### Fixed
+
+* Home screen header scaling and responsiveness issues [#2200](https://github.com/ethyca/fides/pull/2277)
 
 ## [2.5.0](https://github.com/ethyca/fides/compare/2.4.0...2.5.0)
 
diff --git a/clients/admin-ui/src/home/HomeBanner.tsx b/clients/admin-ui/src/home/HomeBanner.tsx
index ed89fb2228..52e95dda1e 100644
--- a/clients/admin-ui/src/home/HomeBanner.tsx
+++ b/clients/admin-ui/src/home/HomeBanner.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Spacer, Text } from "@fidesui/react";
+import { Flex, Image, Spacer, Text } from "@fidesui/react";
 import * as React from "react";
 
 import { useFeatures } from "~/features/common/features";
@@ -12,20 +12,20 @@ const HomeBanner: React.FC = () => {
       background="linear-gradient(180deg, #FFFFFF 0%, #F8F8FF 100%);"
       h="300px"
     >
-      <Box h="128px" px="36px" w="597px">
+      <Flex flexDir="column" mt="40px" pos="absolute" px="36px" w="597px">
         {hasSystems && (
           <>
             <Text
-              fontWeight="semibold"
               fontSize="32px"
+              fontWeight="semibold"
               h="40px"
               lineHeight="32px"
             >
               Welcome back!
             </Text>
             <Text
-              fontWeight="semibold"
               fontSize="18px"
+              fontWeight="semibold"
               h="36px"
               lineHeight="28px"
             >
@@ -43,16 +43,16 @@ const HomeBanner: React.FC = () => {
         {!hasSystems && (
           <>
             <Text
-              fontWeight="semibold"
               fontSize="32px"
+              fontWeight="semibold"
               h="40px"
               lineHeight="32px"
             >
               Welcome to Fides!
             </Text>
             <Text
-              fontWeight="semibold"
               fontSize="18px"
+              fontWeight="semibold"
               h="36px"
               lineHeight="28px"
             >
@@ -66,11 +66,11 @@ const HomeBanner: React.FC = () => {
             </Text>
           </>
         )}
-      </Box>
+      </Flex>
       <Spacer />
-      <Box>
-        <Image alt="" height="100%" src="/images/config_splash.svg" />
-      </Box>
+      <Flex flexShrink={0}>
+        <Image alt="" boxSize="100%" src="/images/config_splash.svg" />
+      </Flex>
     </Flex>
   );
 };
diff --git a/clients/admin-ui/src/home/HomeLayout.tsx b/clients/admin-ui/src/home/HomeLayout.tsx
index 3ff59fce8d..9b43d52ea8 100644
--- a/clients/admin-ui/src/home/HomeLayout.tsx
+++ b/clients/admin-ui/src/home/HomeLayout.tsx
@@ -20,7 +20,7 @@ const HomeLayout: React.FC<HomeLayoutProps> = ({ children, title }) => (
     </Head>
     <Header />
     <NavTopBar />
-    <Flex flexDirection="column" gap="40px" py={10} width="100vw">
+    <Flex flexDirection="column" gap="40px" width="100vw">
       {children}
     </Flex>
   </div>