Просмотр исходного кода

Fix the nav dropdown clipping: closed menus leave layout, right menus anchor inward

T12 contained the closed submenus (which widened every page) with overflow-x:clip on the nav - but clip also cut the OPEN panels at the nav's right edge, so the Admin and Account menus looked scuffed (review round 5). Closed submenus are now display:none (out of the scroll area entirely, nothing clipped); spry's hover/focus-within rules and the touch engine's .is-open restore display:block; and the menubar's last item (Admin) right-anchors its panel so it opens leftward instead of past the viewport edge (Account already right-anchors via .nav-auth). Verified against the live app's served page and CSS in a browser at 360px: all four panels fit (Work 23-199, Library 104-280, Admin 107-283, Account 161-337) with zero elements exiting the viewport; the t12mobile browser audit (18 routes x 3 widths) stays green. Bundles: t12mobile 43/0, pages 129/0, goalui 142/0, t4lists 27/0.
saddle-ClankerSaddle 14 часов назад
Родитель
Сommit
fb91fa29d7
1 измененных файлов с 22 добавлено и 9 удалено
  1. 22 9
      src/pages/app.css

+ 22 - 9
src/pages/app.css

@@ -1680,18 +1680,31 @@ td .truncate.repo-url {
    positioned at left:0 with min-width:11rem, so a menu anchored on a
    li near the viewport's right edge (Admin, Account) extends past it
    and widens the page even while closed (visibility:hidden boxes
-   still occupy the scroll area). Clipping the nav's x axis contains
-   them — `clip` (unlike `hidden`) combines with `visible` on y, so
-   the open dropdown still drops below the bar unclipped; the menu
-   itself never exceeds the bar's width, and the width clamp keeps it
-   inside a phone viewport when open. */
-.topbar .nav {
-    overflow-x: clip;
-    overflow-y: visible;
-}
+   still occupy the scroll area). The first attempt clipped the nav's
+   x axis - which also clipped the OPEN panels at the nav's right edge
+   (review round 5: admin/account menus cut off). display:none when
+   closed removes them from the scroll area entirely without clipping
+   anything; the open states (spry's hover/focus-within + the touch
+   engine's .is-open) restore display, and the menubar's LAST item
+   (Admin) opens LEFTWARD. Account already right-aligns via
+   .nav-auth below. */
 .submenu {
+    display: none;
     max-width: calc(100vw - 1.5rem);
 }
+.has-submenu:hover > .submenu,
+.has-submenu:focus-within > .submenu,
+.has-submenu.is-open > .submenu {
+    display: block;
+}
+/* The menubar's LAST item (Admin) anchors near the right edge; open
+   its panel leftward so it never extends past the viewport. The
+   menubar is a ul INSIDE nav.nav (the account cluster is a sibling
+   ul, not an li), hence the child selector. */
+.topbar nav.nav > ul > li:last-child > .submenu {
+    left: auto;
+    right: 0;
+}
 
 /* (2) Filter selects in the task-queue cluster: a select's intrinsic
    width (its longest option — goal titles run long) forced the whole