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 <noreply@anthropic.com>
This commit is contained in:
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
+4 -3
View File
@@ -126,8 +126,9 @@
the free space and the cluster just follows it. -->
<div class="ml-auto flex items-center gap-1.5 lg:ml-3">
<!-- Notifications -->
<div class="relative">
<!-- Notifications. `dd-anchor`: auf schmalen Schirmen spannt sich das
Panel über den Header statt am Knopf zu kleben (siehe styles.css). -->
<div class="dd-anchor relative">
<button id="notifBtn" type="button" data-dd="notifPanel" aria-expanded="false"
class="icon-btn" aria-label="Benachrichtigungen" title="Ungelesene E-Mails">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -150,7 +151,7 @@
<% if (angemeldet) { %>
<!-- Account -->
<div class="relative">
<div class="dd-anchor relative">
<button type="button" data-dd="ddUser" aria-expanded="false" aria-haspopup="true"
class="nav-item !gap-2 !py-1.5 !pl-1.5 !pr-2">
<span class="grid h-7 w-7 place-items-center rounded-full bg-blue-600/10 text-[11px] font-semibold text-blue-700 ring-1 ring-blue-600/20 dark:bg-white/10 dark:text-white dark:ring-white/15">