From ab62399f6fcb6e4081edca7b11f1bdde2b17efec Mon Sep 17 00:00:00 2001 From: Thomas Hackner Date: Tue, 14 Jul 2026 11:27:22 +0200 Subject: [PATCH] Mobile: Glocken-Panel und Bewerbungsliste liefen aus dem Bild 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 --- public/css/styles.css | 39 +++++++++++++++++++++++++++++++++------ views/partials/header.ejs | 7 ++++--- 2 files changed, 37 insertions(+), 9 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index a1a1372..4800b34 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -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; } diff --git a/views/partials/header.ejs b/views/partials/header.ejs index a7b59f6..e1942cd 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -126,8 +126,9 @@ the free space and the cluster just follows it. -->
- -
+ +