From f72e8881cf9ff6c6dcf650884b68f5d9cde7e9c2 Mon Sep 17 00:00:00 2001
From: William Mantly <wmantly@gmail.com>
Date: Tue, 14 Jul 2026 21:18:01 -0400
Subject: [PATCH] Fix mobile layout: wrap unresponsive tables, let the group
 filter bar wrap (#42)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auditing mobile/responsive views turned up two classes of bug:

1. Missing .table-responsive wrapper (token.ejs and profile.ejs's other
   table already had it): admin.ejs (2 tables), invites.ejs (6 columns),
   notifications.ejs (5 columns), users.ejs (7 columns — the worst case).
   Without it these overflow the page horizontally on narrow viewports
   instead of scrolling within the table.

2. groups.ejs's search/sort/count toolbar was a plain `d-flex` (no
   flex-wrap) containing a search input, a <select> with a hard
   min-width:175px, and a nowrap count span — on a narrow viewport
   there's nowhere for that content to go but off-screen. Added
   flex-wrap and gave the search input a flex-basis so it wraps onto
   its own line first when space is tight.

Verified: EJS compiles for all five templates, npm test 192/192 pass,
and fetched each route from a running instance to confirm the fixes
are present in the served HTML.
---
 nodejs/views/admin.ejs         | 4 ++++
 nodejs/views/groups.ejs        | 4 ++--
 nodejs/views/invites.ejs       | 2 ++
 nodejs/views/notifications.ejs | 2 ++
 nodejs/views/users.ejs         | 2 ++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/nodejs/views/admin.ejs b/nodejs/views/admin.ejs
index de8df4c..3c28a8a 100644
--- a/nodejs/views/admin.ejs
+++ b/nodejs/views/admin.ejs
@@ -117,6 +117,7 @@
 						<i class="fa-solid fa-user-plus"></i> Recent Signups
 					</div>
 					<div class="card-body p-0">
+						<div class="table-responsive">
 						<table class="table table-sm mb-0">
 							<thead>
 								<tr><th>User</th><th>Email</th><th>Joined</th></tr>
@@ -129,6 +130,7 @@
 								</tr>
 							</tbody>
 						</table>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -140,6 +142,7 @@
 						<i class="fa-solid fa-lock"></i> Inactive Users
 					</div>
 					<div class="card-body p-0">
+						<div class="table-responsive">
 						<table class="table table-sm mb-0">
 							<thead>
 								<tr><th>User</th><th>Email</th><th></th></tr>
@@ -156,6 +159,7 @@
 								</tr>
 							</tbody>
 						</table>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/nodejs/views/groups.ejs b/nodejs/views/groups.ejs
index 81fd155..77e3697 100644
--- a/nodejs/views/groups.ejs
+++ b/nodejs/views/groups.ejs
@@ -123,8 +123,8 @@
 </script>
 <div class="row" style="display:none;">
 	
-	<div class="d-flex gap-2 align-items-center">
-		<div class="input-group">
+	<div class="d-flex flex-wrap gap-2 align-items-center">
+		<div class="input-group" style="flex: 1 1 200px;">
 			<span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
 			<input type="text" id="groupSearch" class="form-control" placeholder="Search groups…" oninput="applyFilters()">
 		</div>
diff --git a/nodejs/views/invites.ejs b/nodejs/views/invites.ejs
index 0452c5d..4c64fc2 100644
--- a/nodejs/views/invites.ejs
+++ b/nodejs/views/invites.ejs
@@ -246,6 +246,7 @@
 					</div>
 					<div class="card-header actionMessage" style="display:none;"></div>
 					<div class="card-body p-0">
+						<div class="table-responsive">
 						<table class="table table-sm mb-0">
 							<thead>
 								<tr>
@@ -261,6 +262,7 @@
 								<tr><td colspan="6" class="text-center text-muted py-3">Loading…</td></tr>
 							</tbody>
 						</table>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/nodejs/views/notifications.ejs b/nodejs/views/notifications.ejs
index 9a1f92c..c51ff35 100644
--- a/nodejs/views/notifications.ejs
+++ b/nodejs/views/notifications.ejs
@@ -158,6 +158,7 @@
 						<i class="fa-solid fa-clock-rotate-left"></i> History
 					</div>
 					<div class="card-body p-0">
+						<div class="table-responsive">
 						<table class="table table-sm mb-0">
 							<thead>
 								<tr>
@@ -178,6 +179,7 @@
 								</tr>
 							</tbody>
 						</table>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/nodejs/views/users.ejs b/nodejs/views/users.ejs
index 6d8f67b..b07afb1 100755
--- a/nodejs/views/users.ejs
+++ b/nodejs/views/users.ejs
@@ -145,6 +145,7 @@
 				User List
 			</div>
 			<div class="card-header actionMessage" style="display:none"></div>
+			<div class="table-responsive">
 			<table class="card-body table table-striped" style="margin-bottom:0">
 				<thead>
 					<th>ID</th>
@@ -198,6 +199,7 @@
 					</tr>
 				</tbody>
 			</table>
+			</div>
 		</div>
 	</div>
 </div>