From 8d222860f00ffe32220767d2bb4029cec3b0b381 Mon Sep 17 00:00:00 2001
From: Matthew Heller <hellergood@gmail.com>
Date: Wed, 26 Oct 2022 17:23:49 -0500
Subject: [PATCH] On narrow screens, bump the footer links to a second row. Re
 #2260. (#2267)

* On narrow screens, bump the footer links to a second row. Re #2260. Thanks to @kittee for CSS assistance.

* Prettified Code!

Co-authored-by: heller <heller@users.noreply.github.com>
---
 web/components/ui/Footer/Footer.module.scss |  6 ++--
 web/components/ui/Footer/Footer.tsx         | 32 +++++++++------------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss
index 5eefc9d2d..c93cd3945 100644
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/web/components/ui/Footer/Footer.module.scss
@@ -1,6 +1,7 @@
 .footer {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   height: var(--footer-height);
   justify-content: space-between;
   flex-direction: row;
@@ -19,11 +20,10 @@
   }
 
   .links {
+    column-gap: 2rem;
+    width: auto;
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    .item {
-      margin-left: 1.2em;
-    }
   }
 }
diff --git a/web/components/ui/Footer/Footer.tsx b/web/components/ui/Footer/Footer.tsx
index 5c25580e1..3e11b89b9 100644
--- a/web/components/ui/Footer/Footer.tsx
+++ b/web/components/ui/Footer/Footer.tsx
@@ -7,26 +7,20 @@ export type FooterProps = {
 
 export const Footer: FC<FooterProps> = ({ version }) => (
   <div className={styles.footer}>
-    <div className={styles.text}>
+    <span>
       Powered by <a href="https://owncast.online">{version}</a>
-    </div>
-    <div className={styles.links}>
-      <div className={styles.item}>
-        <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
-          Documentation
-        </a>
-      </div>
-      <div className={styles.item}>
-        <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
-          Contribute
-        </a>
-      </div>
-      <div className={styles.item}>
-        <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
-          Source
-        </a>
-      </div>
-    </div>
+    </span>
+    <span className={styles.links}>
+      <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
+        Documentation
+      </a>
+      <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
+        Contribute
+      </a>
+      <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
+        Source
+      </a>
+    </span>
   </div>
 );
 export default Footer;