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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user