thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile-Support: Smartphones für die ganze Seite

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-14 10:24:49 +02:00
co-authored by Claude
parent 295c447d58
commit 3c7f5d7c74
5 changed files with 77 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+62 -7
View File
@@ -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 <body>), 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;
}
}