From 1b95edc9e1637b3faca7e7affe8c00204b9664e8 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Tue, 22 Jul 2025 11:51:00 -0700
Subject: [PATCH] feat: footer layout, right side horizontally scrolls for
 improved responsiveness and UX

---
 .../include/DefaultPageLayout/Footer.php      | 32 +++++-----
 .../plugins/dynamix/styles/default-base.css   | 62 ++++++++++++++-----
 2 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
index 213b7a7db..59712c806 100644
--- a/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
+++ b/emhttp/plugins/dynamix/include/DefaultPageLayout/Footer.php
@@ -56,23 +56,21 @@ function getArrayStatus($var) {
         </span>
         <span id="user-notice" class="red-text"></span>
     </div>
-    <div class="footer-right">
-        <span id="copyright">
-            <unraid-theme-switcher
-                current="<?=$theme?>"
-                themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
-            </unraid-theme-switcher>
-            Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.
-            <a
-                class="footer-link"
-                href="https://docs.unraid.net/go/manual/"
-                target="_blank"
-                rel="noopener noreferrer"
-                title="<?=_('Online manual')?>"
-            >
-                <i class="fa fa-book"></i> <?=_('manual')?>
-            </a>
-        </span>
+    <div id="copyright" class="footer-right">
+        <unraid-theme-switcher
+            current="<?=$theme?>"
+            themes='<?=htmlspecialchars(json_encode(['azure', 'gray', 'black', 'white']), ENT_QUOTES, 'UTF-8')?>'>
+        </unraid-theme-switcher>
+        <span>Unraid&reg; webGui &copy;<?=releaseDateYear()?>, Lime Technology, Inc.</span>
+        <a
+            class="footer-link"
+            href="https://docs.unraid.net/go/manual/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="<?=_('Online manual')?>"
+        >
+            <i class="fa fa-book"></i> <?=_('manual')?>
+        </a>
         <? if ($wlan0): ?>
             <span id="wlan0" class="grey-text" onclick="wlanSettings()">
                 <i class="fa fa-wifi fa-fw"></i>
diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index 02bfc4e04..a07b5bb9e 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -657,15 +657,25 @@ div.title span img {
     padding: .5rem 1rem;
     width: 100%;
     text-align: center;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     margin-top: auto;
+    /* for some reason these have padding by default...so we're removing it in the footer without needing to refactor all usages of these classes throughout the webgui */
+    .green,
+    .red,
+    .orange,
+    .blue {
+        padding-left: 0;
+        padding-right: 0;
+    }
 }
+
 @media (min-width: 768px) {
     #footer {
-        grid-template-columns: minmax(0, auto) minmax(0, auto);
+        flex-direction: row;
         justify-content: space-between;
+        align-items: center;
         position: fixed;
         bottom: 0;
         left: 0;
@@ -689,21 +699,47 @@ div.title span img {
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    flex: 1 1 auto; /* Take available space */
 }
-.footer-right {
+.footer-right,
+#copyright {
+    text-align: center;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    flex-wrap: nowrap;
     align-items: center;
     gap: 1rem;
+    overflow-x: auto;
+    overflow-y: hidden;
+    font-family: bitstream;
+    font-size: 1.1rem;
+    flex: 0 0 auto; /* Default: natural size for mobile column layout */
+    width: 100%; /* Full width on mobile */
+    min-width: 0; /* Critical: allows flex item to shrink below content size */
+    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
+    scrollbar-width: thin; /* Firefox */
+}
+.footer-right > *,
+#copyright > * {
+    flex: 0 0 auto; /* Prevent shrinking and growing */
+    white-space: nowrap;
+}
+/* Show scrollbar on hover for better UX */
+.footer-right:hover,
+#copyright:hover {
+    scrollbar-width: auto;
 }
 @media (min-width: 768px) {
-    .footer-left, 
-    .footer-right {
+    .footer-left {
         justify-content: flex-start;
+        flex: 0 0 auto; /* Only take needed space on desktop */
     }
-    .footer-right {
-        justify-content: flex-end;
+    .footer-right,
+    #copyright {
+        text-align: right;
+        justify-content: flex-start; /* Start from left to enable overflow */
+        flex: 1 1 0; /* Take remaining space */
+        width: auto; /* Override mobile full width */
+        min-width: 0; /* Critical for overflow to work */
     }
 }
 .footer-link {
@@ -711,10 +747,6 @@ div.title span img {
     align-items: center;
     gap: 0.5rem;
 }
-#copyright {
-    font-family: bitstream;
-    font-size: 1.1rem;
-}
 .green {
     color: var(--green-800);
     padding-left: 5px;