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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user