From b0f6c1b6f9674db7dca8b08a0cb3757e76bc0b4b Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 19 May 2026 19:36:15 +0000
Subject: [PATCH] fix: Improve mobile responsiveness of admin UI

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 frontend/menu.html | 45 +++++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 20 deletions(-)
diff --git a/frontend/menu.html b/frontend/menu.html
index 7f84865..6394ec0 100644
--- a/frontend/menu.html
+++ b/frontend/menu.html
@@ -13,12 +13,12 @@
 <body class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
   <div class="mx-auto max-w-2xl p-6 space-y-6">
     <div id="topBanner" class="hidden rounded-2xl border border-green-200 bg-green-50 p-3 text-green-700 text-center dark:bg-green-900 dark:border-green-700 dark:text-green-300"></div>
-    <header class="flex items-center justify-between">
+    <header class="flex items-center justify-between flex-wrap gap-y-2">
       <h1 class="text-2xl font-semibold">Admin</h1>
-      <div class="flex items-center gap-2">
-        <a id="linkPublicUploader" href="/" class="hidden rounded-xl border px-3 py-1 text-sm dark:border-gray-600">Public uploader</a>
-        <a href="/logout" id="btnLogout" class="rounded-xl border px-3 py-1 text-sm dark:border-gray-600">Logout</a>
-        <button id="btnTheme" class="rounded-xl border px-3 py-1 text-sm dark:border-gray-600" title="Toggle dark mode">
+      <div class="flex items-center gap-2 flex-wrap">
+        <a id="linkPublicUploader" href="/" class="hidden rounded-xl border px-3 py-2 text-sm dark:border-gray-600">Public uploader</a>
+        <a href="/logout" id="btnLogout" class="rounded-xl border px-3 py-2 text-sm dark:border-gray-600">Logout</a>
+        <button id="btnTheme" class="rounded-xl border px-3 py-2 text-sm dark:border-gray-600" title="Toggle dark mode">
           <svg id="iconLight" class="w-4 h-4 hidden" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414z" clip-rule="evenodd"/>
           </svg>
@@ -26,8 +26,6 @@
             <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
           </svg>
         </button>
-        <button id="btnPing" class="rounded-xl border px-3 py-1 text-sm dark:border-gray-600">Test connection</button>
-        <span id="pingStatus" class="ml-2 text-sm text-gray-500 dark:text-gray-400"></span>
       </div>
     </header>
 
@@ -80,7 +78,7 @@
     <section class="rounded-2xl border bg-white dark:bg-gray-800 dark:border-gray-700 p-4 space-y-3">
       <div class="flex items-center justify-between gap-2 flex-wrap">
         <h2 class="text-lg font-medium">Manage Links</h2>
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 flex-wrap justify-end">
           <input id="searchQ" placeholder="Search" class="rounded-lg border px-3 py-2 bg-white dark:bg-gray-900 dark:border-gray-700"/>
           <select id="sortSel" class="rounded-lg border px-3 py-2 bg-white dark:bg-gray-900 dark:border-gray-700">
             <option value="-created">Newest</option>
@@ -98,11 +96,11 @@
           <thead>
             <tr class="text-left border-b dark:border-gray-700">
               <th class="py-2"><input id="chkAll" type="checkbox"/></th>
-              <th class="py-2" style="width: 45%;">Name</th>
-              <th class="py-2" style="width: 18%;">Status</th>
-              <th class="py-2">Uses</th>
-              <th class="py-2">Expires</th>
-              <th class="py-2">Folder</th>
+              <th class="py-2">Name</th>
+              <th class="py-2">Status</th>
+              <th class="py-2 hidden md:table-cell">Uses</th>
+              <th class="py-2 hidden md:table-cell">Expires</th>
+              <th class="py-2 hidden md:table-cell">Folder</th>
               <th class="py-2">Actions</th>
             </tr>
           </thead>
@@ -121,7 +119,7 @@
     <section class="rounded-2xl border bg-white dark:bg-gray-800 dark:border-gray-700 p-4 space-y-3">
       <div class="flex items-center justify-between gap-2 flex-wrap">
         <h2 class="text-lg font-medium">Manage Files</h2>
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 flex-wrap justify-end">
           <input id="filesSearchQ" placeholder="Search" class="rounded-lg border px-3 py-2 bg-white dark:bg-gray-900 dark:border-gray-700"/>
           <select id="filesSortSel" class="rounded-lg border px-3 py-2 bg-white dark:bg-gray-900 dark:border-gray-700">
             <option value="-modified">Newest</option>
@@ -151,8 +149,12 @@
       </div>
     </section>
 
-    <section class="text-xs text-gray-500">
-		Admin link page
+    <section class="text-xs text-gray-500 space-y-2">
+      <p>Admin link page</p>
+      <div class="flex items-center gap-2">
+        <button id="btnPing" class="rounded-xl border px-3 py-2 text-sm dark:border-gray-600">Test connection</button>
+        <span id="pingStatus" class="text-sm text-gray-500 dark:text-gray-400"></span>
+      </div>
     </section>
   </div>
 
@@ -295,15 +297,15 @@
         return `
           <tr class="border-b dark:border-gray-800" data-token="${row.token}">
             <td class="py-2"><input class="chkRow" type="checkbox" data-token="${row.token}"/></td>
-            <td class="py-2" style="width:45%;">
+            <td class="py-2">
               <input class="inName w-full rounded border px-2 py-1 bg-white dark:bg-gray-900 dark:border-gray-700" data-token="${row.token}" value="${(row.name||'').replaceAll('"','&quot;')}" title="${(row.name||'').replaceAll('"','&quot;')}"/>
             </td>
             <td class="py-2">${status}</td>
-            <td class="py-2">${uses}</td>
-            <td class="py-2">
+            <td class="py-2 hidden md:table-cell">${uses}</td>
+            <td class="py-2 hidden md:table-cell">
               <input class="inExpires w-36 rounded border px-2 py-1 bg-white dark:bg-gray-900 dark:border-gray-700" type="date" data-token="${row.token}" value="${row.expiresAt? new Date(row.expiresAt).toISOString().slice(0,10):''}" title="${row.expiresAt? new Date(row.expiresAt).toLocaleString():''}"/>
             </td>
-            <td class="py-2">${row.albumName || '—'}</td>
+            <td class="py-2 hidden md:table-cell">${row.albumName || '—'}</td>
             <td class="py-2">
               <div class="flex items-center gap-1 whitespace-nowrap">
                 <button class="btnDetails group relative rounded-xl border px-2 py-1 text-xs dark:border-gray-600 inline-flex items-center" data-token="${row.token}" aria-label="Show details">
@@ -574,8 +576,10 @@
       wrap.innerHTML = html;
       const dlg = wrap.firstElementChild;
       document.body.appendChild(dlg);
+      document.body.style.overflow = 'hidden';
 
       const close = () => {
+        document.body.style.overflow = '';
         if (location.hash === '#gallery') {
           history.back();
         } else {
@@ -597,6 +601,7 @@
     window.addEventListener('popstate', () => {
       const galleryModal = document.querySelector('#gallery-modal');
       if (galleryModal) {
+        document.body.style.overflow = '';
         galleryModal.remove();
       }
     });
