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

Mobile: Glocken-Panel und Bewerbungsliste liefen aus dem Bild

Browse Source 
Benachrichtigungen: Das Panel haengt per right:0 am Wrapper der Glocke, rechts
von ihr stehen aber noch Konto und Burger - die 20rem Breite wuchsen dadurch
nach links aus dem Viewport (gemessen -51px bei 375px Breite). Unter 768px
spannt es sich jetzt ueber den Header: `position: static` auf dem Anker macht
den Header zum Bezugsrahmen, was auch die vertikale Lage inklusive
Impersonation-Banner richtig haelt.

Bewerbungsliste: Das gestapelte Karten-Layout griff erst unter 640px, die
minmax()-Spalten des Rasters brauchen aber ~764px und die Karte bekommt ihre
min-w-[760px] erst ab md (768px). Im Band dazwischen - Handy quer, grosse
Phones - galt also das Desktop-Raster, und Stelle, Art und Status lagen
ausserhalb (132px Ueberhang bei 667px). Grenze auf 767px gezogen, damit sie an
md anschliesst.

Nachgemessen im Headless-Browser bei 375/390/412/667/740/820px: nichts ragt
mehr heraus, die Liste scrollt nicht mehr horizontal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-14 11:27:22 +02:00
co-authored by Claude Opus 4.8
parent e462fa18ad
commit ab62399f6f
2 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+33 -6
View File
@@ -183,6 +183,25 @@ button.nav-item, .icon-btn { cursor: pointer; }
/* Menus that hang off a left-aligned nav item open to the left edge. */
nav .dd-panel { right: auto; left: 0; }
/* Auf schmalen Schirmen taugt das Ausrichten am Knopf nicht: das Panel hängt an
der Glocke, rechts von ihr stehen aber noch Konto und Burger — ein 20rem breites
Panel wächst dann nach links aus dem Bild heraus (gemessen: -51px bei 375px).
Deshalb spannt es sich hier über die Breite des Headers.
Der Trick ist `position: static` auf dem Anker: damit wird der Header (sticky =
positioniert) zum Bezugsrahmen des absolut gesetzten Panels. Das hält auch die
vertikale Lage richtig — top: 100% ist dann die Unterkante des Headers, inklusive
des Impersonation-Banners, wenn eines da ist. */
@media (max-width: 767px) {
#siteHeader .dd-anchor { position: static; }
#siteHeader .dd-panel {
left: 0.75rem;
right: 0.75rem;
width: auto; /* schlägt Tailwinds w-80 / w-60 (ID erhöht die Spezifität) */
max-width: none;
}
}
@keyframes dd-in {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: none; }
@@ -447,13 +466,21 @@ button.loading::after {
.fixed.inset-0 > .min-h-screen {
align-items: flex-start !important;
}
}
/* 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). */
/* 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. Below md, 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).
Die Grenze ist bewusst 767px und nicht 640px wie beim Rest: das Raster braucht
allein durch seine minmax()-Spalten rund 764px, und die Karte bekommt ihre
min-w-[760px] erst ab md (768px). Zwischen 641px und 767px — Handy quer, große
Phones — galt vorher also das Desktop-Raster ohne Not, und Stelle, Art und
Status lagen außerhalb des Sichtbaren (gemessen: 132px Überhang bei 667px). */
@media (max-width: 767px) {
.app-head {
display: none !important;
}