From 3a1db2f104e1553e2172d4b5b69ba5d3d0ee177a Mon Sep 17 00:00:00 2001
From: cnrad <conradwcrawford@gmail.com>
Date: Tue, 24 May 2022 14:02:53 -0400
Subject: [PATCH] fix CLS in FooterStat

---
 .gitignore      |  1 +
 pages/index.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1437c53..fb89c69 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.env
 
 # dependencies
 /node_modules
diff --git a/pages/index.tsx b/pages/index.tsx
index c6fff71..172cbec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ export default function Home({ userCount }: { userCount: number }) {
     const [userId, setUserId] = useState<null | string>(null);
     const [userError, setUserError] = useState<string>();
     const [copyState, setCopyState] = useState("Copy");
-    const countRef = useRef<HTMLSpanElement | null>(null);
+    const countRef = useRef<HTMLDivElement | null>(null);
 
     const counter = useSmoothCount({ ref: countRef, target: userCount, duration: 3, curve: [0, 1, 0, 1] });
 
@@ -91,7 +91,8 @@ export default function Home({ userCount }: { userCount: number }) {
                 </Container>
             </Main>
             <FooterStat>
-                Lanyard Profile Readme has <span style={{ fontWeight: "bold" }} ref={countRef} /> total users!
+                Lanyard Profile Readme has <div style={{ fontWeight: "bold", width: "2.75rem" }} ref={countRef} /> total
+                users!
             </FooterStat>
         </>
     );
@@ -226,6 +227,10 @@ const Example = styled.img`
 
 const FooterStat = styled.div`
     position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     line-height: 1rem;
     bottom: 1rem;
     left: 50%;
@@ -236,7 +241,13 @@ const FooterStat = styled.div`
     border-radius: 0.5rem;
     text-align: center;
     box-shadow: 0 2px 15px -10px #a21caf;
-    min-width: 275px;
+    min-width: 400px;
+
+    @media (max-width: 400px) {
+        font-size: 14px;
+        min-width: 365px;
+        padding: 0.75rem 1rem;
+    }
 
     &:before {
         content: "";