Make admin panel usable on mobile

The sidebar was a fixed 220px flex column that left barely any room
for content on a phone, and tables had no min-width so columns just
squeezed into unreadable slivers instead of scrolling.

Moves the sidebar's layout rules out of inline styles (which media
queries can't override) into real CSS classes, and collapses it into
a horizontally-scrollable pill bar below 768px so the content area
gets the full screen width. Tables now get a sensible min-width so
they scroll horizontally on narrow screens instead of squishing, and
the per-player tab bar on the session log view scrolls too.
This commit is contained in:
Frank
2026-08-10 14:58:12 +02:00
parent f6df9f7ba6
commit 98cf48b29d
6 changed files with 100 additions and 28 deletions
+3 -1
View File
@@ -16,12 +16,14 @@
</div>
{% else %}
{# Tab buttons #}
<div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0;">
<div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
{% for playerLog in playersLogs %}
<button
onclick="openTab('player-{{ loop.index }}')"
id="tab-{{ loop.index }}"
style="
flex-shrink: 0;
white-space: nowrap;
padding: 0.6rem 1.25rem;
border: 1px solid {{ loop.first ? '#3b82f6' : '#e2e8f0' }};
border-bottom: {{ loop.first ? '1px solid #fff' : '1px solid #e2e8f0' }};