bug(mobile): horizontal scroll overflow at 320px on Home and Admin #91

New Issue

marcel · 2026-03-27T12:19:21+01:00

marcel commented

2026-03-27 12:19:21 +01:00

Severity: Critical — blocks use

At 320px viewport width, both the Home/Documents page and the Admin page produce horizontal overflow, causing a scrollbar at the bottom and content cut off at the right edge.

Home page: the search + filter row (Search | ▼ FILTER | ✕) overflows because the filter button has a fixed min-width and the row does not wrap.

Admin page: the Users table (Login / Name / Groups columns) and the USERS / GROUPS tab bar both overflow. The tab bar cuts off at "GROUP…".

Fix — Home search row

Add flex-wrap: wrap or reduce the filter button to an icon-only variant below 360px:

/* option: collapse filter to icon-only on very narrow screens */
@media (max-width: 359px) {
  .filter-button-label { display: none; }
}

Or simply ensure the search input uses min-width: 0; flex: 1 so it shrinks instead of overflowing.

Fix — Admin table

Wrap the table in a horizontally scrollable container (acceptable for data tables):

<div class="overflow-x-auto">
  <table>…</table>
</div>

Or switch to a card-per-row layout at <480px where each user becomes a stacked card (Login → bold title, Name + Groups as metadata below). This is more readable on mobile but more work to implement.

Fix — Admin tab bar

.tab-bar { display: flex; }
.tab-bar button { flex: 1; min-width: 0; }

This splits available space equally between USERS and GROUPS tabs.

## Severity: Critical — blocks use At 320px viewport width, both the Home/Documents page and the Admin page produce horizontal overflow, causing a scrollbar at the bottom and content cut off at the right edge. **Home page:** the search + filter row (`Search | ▼ FILTER | ✕`) overflows because the filter button has a fixed min-width and the row does not wrap. **Admin page:** the Users table (Login / Name / Groups columns) and the USERS / GROUPS tab bar both overflow. The tab bar cuts off at "GROUP…". --- ## Fix — Home search row Add `flex-wrap: wrap` or reduce the filter button to an icon-only variant below 360px: ```css /* option: collapse filter to icon-only on very narrow screens */ @media (max-width: 359px) { .filter-button-label { display: none; } } ``` Or simply ensure the search input uses `min-width: 0; flex: 1` so it shrinks instead of overflowing. ## Fix — Admin table Wrap the table in a horizontally scrollable container (acceptable for data tables): ```html <div class="overflow-x-auto"> <table>…</table> </div> ``` Or switch to a card-per-row layout at `<480px` where each user becomes a stacked card (Login → bold title, Name + Groups as metadata below). This is more readable on mobile but more work to implement. ## Fix — Admin tab bar ```css .tab-bar { display: flex; } .tab-bar button { flex: 1; min-width: 0; } ``` This splits available space equally between USERS and GROUPS tabs.

marcel added the ui label 2026-03-27 12:28:16 +01:00

marcel referenced this issue from a commit

2026-03-27 15:46:40 +01:00

fix(#91): add px-4 base padding and fix admin tab overflow at 320px

marcel referenced a pull request that will close this issue

2026-03-27 15:47:22 +01:00

fix(#91): add px-4 base padding and fix admin tab overflow at 320px #106

marcel referenced this issue from a commit

2026-03-27 15:50:05 +01:00

fix(#91): add px-4 base padding and fix admin tab overflow at 320px

marcel closed this issue

2026-03-27 15:50:20 +01:00