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.