Scroll a menu that is too long for the window

The popover was fit-content with overflow visible, so a long menu ran past the
edge of the top layer, where the page's own scrolling cannot reach it. It now
caps at 18rem — less on a short window — and scrolls, as M3's menu behaviour
asks, and the keyboard brings the item it moves to into view. Plan step 11,
actions.md ACT-04.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/menu.blade.php

@@ -32,6 +32,10 @@
      of the loop iteration around it, which would give every child component after the menu the
      same key.
 
+     A menu too long for the window scrolls, as M3 asks, rather than running off the edge of the
+     top layer where nothing can reach it: 18rem at most, and less on a short window. The arrow
+     keys, Home, End and typeahead bring the item they move to into view.
+
      The container is Expressive's standard menu (surface-container-low, 16px corner, elevation
      2), or `vibrant` in tertiary-container — StandardMenuTokens and VibrantMenuTokens from
      androidx Compose Material 3 (Apache-2.0). --}}
@@ -67,7 +71,7 @@
         x-on:keydown="navigate($event)"
         x-on:click="activate($event)"
         @class([
-            'm-0 min-w-28 max-w-70 overflow-visible border-0 p-1 rounded-corner-lg shadow-elevation-2 [inset:auto]',
+            'm-0 min-w-28 max-w-70 max-h-[min(18rem,calc(100dvh-2rem))] overflow-y-auto border-0 p-1 rounded-corner-lg shadow-elevation-2 [inset:auto]',
             'my-1 [position-try-fallbacks:flip-block,flip-inline,flip-block_flip-inline]',
             'opacity-0 transition-[opacity,translate,display,overlay] transition-discrete duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast open:opacity-100 starting:open:opacity-0',
             'bg-surface-container-low text-on-surface' => ! $vibrant,