fix(web): add scroll to settings language menu when it overflows view… (#247)

* fix(web): add scroll to settings language menu when it overflows viewport

The language picker dropdown in the settings dialog opens upward but had
no max-height constraint, causing top options to be clipped off-screen.
Add max-height with overflow-y: auto and switch from bottom to top +
transform positioning so the scrollbar actually activates.

* docs(web): add comment explaining language menu max-height magic numbers

* fix(web): constrain language menu height to available space above trigger

The previous translateY(-100%) approach clipped the menu above the
viewport when the trigger was near the top edge. Switch to bottom
positioning with a JS-computed CSS variable (--menu-available-h) so
the menu height never exceeds the distance to the viewport top.

apps/web/src/components/SettingsDialog.tsx

@@ -488,7 +488,8 @@ export function SettingsDialog({
                     bottom: window.innerHeight - languageMenuRect.top + 6,
                     left: languageMenuRect.left,
                     width: languageMenuRect.width,
-                  }}
+                    '--menu-available-h': `${languageMenuRect.top - 6}px`,
+                  } as React.CSSProperties}
                 >
                   {LOCALES.map((code) => {
                     const active = locale === code;

apps/web/src/index.css

@@ -1223,6 +1223,12 @@ code {
   position: fixed;
   z-index: 1000;
   max-width: calc(100vw - 24px);
+  /* 360px = 9 locales × ~40px; --menu-available-h is set by JS to the
+     distance between the trigger and the viewport top, so the menu never
+     overflows above the viewport regardless of trigger placement. */
+  max-height: min(360px, var(--menu-available-h, 360px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   gap: 2px;