Fix mobile layout: wrap unresponsive tables, let the group filter bar wrap (#42)

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.
This commit is contained in:
2026-07-14 21:18:01 -04:00
committed by GitHub
parent 3ceeeeeca1
commit f72e8881cf
5 changed files with 12 additions and 2 deletions
+2
View File
@@ -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>