From 3c7f5d7c7410da738766afcc0582319fd9d94537 Mon Sep 17 00:00:00 2001 From: Thomas Hackner Date: Tue, 14 Jul 2026 10:24:49 +0200 Subject: [PATCH] =?UTF-8?q?Mobile-Support:=20Smartphones=20f=C3=BCr=20die?= =?UTF-8?q?=20ganze=20Seite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dashboard-Bewerbungsliste auf Handy als gestapelte Karten statt horizontal gescrolltem 760px-Raster - Modals auf Handy scrollbar (Inhalt wurde bisher unten abgeschnitten) - Chat: Thread-Aktionen auf Touch sichtbar, Sidebar/Chat-Höhen für mobil - Bewerbungs-Antwort-Toolbar & Admin-Stat-Boxen umbruchfähig Co-Authored-By: Claude --- public/css/styles.css | 69 ++++++++++++++++++++++++++++++++++++++----- views/admin.ejs | 2 +- views/bewerbung.ejs | 4 +-- views/chat.ejs | 12 ++++++-- views/index.ejs | 6 ++-- 5 files changed, 77 insertions(+), 16 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 0fcea15..a1a1372 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -422,16 +422,71 @@ button.loading::after { table { min-width: 768px; } +} - /* Adjust modal width on mobile */ - .max-w-lg { - max-width: 90vw; - margin: 0 5vw; +/* ============================================ + Smartphone support (< 640px) + The layout already collapses most grids via Tailwind's sm:/md: prefixes and + the header ships a burger menu. The rules below cover the few surfaces that + still assume desktop: tall modals, the 7-column dashboard grid, and a couple + of non-wrapping toolbars. + ============================================ */ + +/* Modals: the overlay locks body scroll (overflow:hidden on ), so a panel + taller than the viewport would have its bottom cut off and unreachable. Cap + the panel to the viewport and let it scroll internally; align the wrapper to + the top so the close button stays in reach instead of being clipped. */ +@media (max-width: 640px) { + .max-w-lg, + .max-w-md { + max-width: calc(100vw - 2rem) !important; + max-height: calc(100vh - 2rem) !important; + overflow-y: auto !important; + margin: 0 !important; + } + .fixed.inset-0 > .min-h-screen { + align-items: flex-start !important; } - .max-w-md { - max-width: 90vw; - margin: 0 5vw; + /* Dashboard application list: the desktop layout is a 7-column grid forced to + 760px and scrolled horizontally — usable on a phone only with two-thumb + scrolling. On a smartphone, restyle each row into a stacked card so the + primary content fits the viewport. The column header row is hidden; the + cells are re-placed via grid-template-areas (their DOM order is unrelated + to their visual position). */ + .app-head { + display: none !important; + } + .app-line.app-grid { + grid-template-columns: 1.25rem 1fr auto !important; + grid-template-areas: + "chevron firma actions" + "chevron stelle actions" + "chevron datum actions" + "chevron art actions" + "chevron status actions" !important; + row-gap: 0.2rem !important; + column-gap: 0.625rem !important; + padding: 0.75rem 1rem !important; + align-items: start !important; + } + .app-line.app-grid > *:nth-child(1) { grid-area: chevron; align-self: center; } + .app-line.app-grid > *:nth-child(2) { grid-area: datum; } + .app-line.app-grid > *:nth-child(3) { grid-area: firma; } + .app-line.app-grid > *:nth-child(4) { grid-area: stelle; } + .app-line.app-grid > *:nth-child(5) { grid-area: art; } + .app-line.app-grid > *:nth-child(6) { grid-area: status; } + .app-line.app-grid > *:nth-child(7) { grid-area: actions; align-self: center; } + /* Let text wrap inside a card instead of truncating to the now-narrow column. */ + .app-line.app-grid .truncate { + white-space: normal !important; + overflow: visible !important; + text-overflow: clip !important; + } + /* Enlarge the edit/delete hit targets for touch. */ + .app-line.app-grid .app-actions a, + .app-line.app-grid .app-actions button { + padding: 0.5rem !important; } } diff --git a/views/admin.ejs b/views/admin.ejs index a4a0fc9..0719ab0 100644 --- a/views/admin.ejs +++ b/views/admin.ejs @@ -28,7 +28,7 @@

Konten anlegen, Passwörter zurücksetzen, ein Konto übernehmen oder Benutzer inkl. aller Daten löschen.

-
+
<%= users.length %>
Benutzer
diff --git a/views/bewerbung.ejs b/views/bewerbung.ejs index 22f2fc9..fdbb10b 100644 --- a/views/bewerbung.ejs +++ b/views/bewerbung.ejs @@ -500,9 +500,9 @@ -
+
-
+