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

@@ -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;
-    }
   }
 }

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>
+    </span>
-    <div className={styles.links}>
+    <span className={styles.links}>
-      <div className={styles.item}>
+      <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
-        <a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
+        Documentation
-          Documentation
+      </a>
-        </a>
+      <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
-      </div>
+        Contribute
-      <div className={styles.item}>
+      </a>
-        <a href="https://owncast.online/help" target="_blank" rel="noreferrer">
+      <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
-          Contribute
+        Source
-        </a>
+      </a>
-      </div>
+    </span>
-      <div className={styles.item}>
-        <a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
-          Source
-        </a>
-      </div>
-    </div>
   </div>
 );
 export default Footer;