From 679aab140d6ddcca3a47f7ccf60bb63bc4ac98aa Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Tue, 18 Jul 2023 20:32:56 +0100
Subject: [PATCH] Fixed homepage responsivness on Chromium webkit browsers

---
 src/components/Results/TxtRecords.tsx   | 2 +-
 src/components/misc/FancyBackground.tsx | 6 ++++--
 src/components/misc/Footer.tsx          | 9 ++++++++-
 src/pages/Home.tsx                      | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/Results/TxtRecords.tsx b/src/components/Results/TxtRecords.tsx
index 4fde6c2..d1079f7 100644
--- a/src/components/Results/TxtRecords.tsx
+++ b/src/components/Results/TxtRecords.tsx
@@ -4,7 +4,7 @@ import Row from 'components/Form/Row';
 
 const cardStyles = `
 grid-column: span 2;
-span.val { max-width: 32rem; }
+span.val { max-width: 32rem !important; }
 `;
 
 const TxtRecordCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {
diff --git a/src/components/misc/FancyBackground.tsx b/src/components/misc/FancyBackground.tsx
index cff5655..626a578 100644
--- a/src/components/misc/FancyBackground.tsx
+++ b/src/components/misc/FancyBackground.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 
 
 const FancyBackground = (): JSX.Element => {
@@ -325,7 +326,7 @@ const FancyBackground = (): JSX.Element => {
     return { x: xx, y: yy };
   };
   
-  document.addEventListener('DOMContentLoaded', function () {
+  useEffect(() => {
     App.setup();
     App.draw();
   
@@ -334,7 +335,8 @@ const FancyBackground = (): JSX.Element => {
       requestAnimationFrame(frame);
     };
     frame();
-  });
+  }, []);
+  
   
 
   return (
diff --git a/src/components/misc/Footer.tsx b/src/components/misc/Footer.tsx
index 3f69566..eb05576 100644
--- a/src/components/misc/Footer.tsx
+++ b/src/components/misc/Footer.tsx
@@ -8,18 +8,25 @@ const StyledFooter = styled.footer`
   padding: 0.5rem 0;
   background: ${colors.backgroundDarker};
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
   flex-wrap: wrap;
   opacity: 0.75;
   transition: all 0.2s ease-in-out;
+  @media (min-width: 1024px) {
+    justify-content: space-between;
+  }
   &:hover {
     opacity: 1;
   }
   span {
     margin: 0 0.5rem;
+    text-align: center; 
   }
 `;
 
+
 const Link = styled.a`
   color: ${colors.primary};
   font-weight: bold;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index b80cecf..2172368 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -119,7 +119,7 @@ const Home = (): JSX.Element => {
         />
         {/* <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton> */}
         { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        <Button size="large" onClick={submit}>Analyze!</Button>
+        <Button styles="width: calc(100% - 1rem);" size="large" onClick={submit}>Analyze!</Button>
       </UserInputMain>
       <Footer isFixed={true} />
     </HomeContainer>