fix(7696): float nice-select dropdowns above scrollable popups

Qodo flagged that making .popup-content a scroll container clips
absolutely-positioned descendants — so the Settings popup's font and
language dropdowns can be truncated when their list extends past the
popup's scroll bounds on short viewports.

Mirror the existing toolbar workaround: when a nice-select sits inside
.popup-content, switch the list to position:fixed (CSS) and place it
with viewport-relative coordinates from getBoundingClientRect (JS),
respecting the existing reverse class for upward-opening lists.

Also relax the regression test per Qodo: drop the brittle
scrollHeight > clientHeight assertion in favour of asserting the
popup declares overflow-y:auto and proving Delete pad is initially
off-screen, then reachable via scroll.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

src/static/css/pad/form.css

@@ -132,7 +132,11 @@ select, .nice-select {
   bottom: calc(100% + 5px);
   top: auto;
 }
-.toolbar .nice-select .list {
+.toolbar .nice-select .list,
+/* Popups are scroll containers (see popup.css), which would otherwise clip the
+   absolutely-positioned dropdown list. Float it above the popup with fixed
+   positioning, matching how the toolbar dropdowns escape their container. */
+.popup .nice-select .list {
   position: fixed;
   top: auto;
   left: auto;

src/static/js/vendors/nice-select.ts

@@ -123,6 +123,22 @@
         }
         $dropdown.find('.list').css('max-height', $maxListHeight + 'px');
 
+        // Popups are scroll containers (since #7696) which would clip the
+        // absolutely-positioned dropdown list. The list is repositioned with
+        // `position: fixed` (see form.css) so it floats above the popup; we
+        // need viewport-relative coordinates here. Done after the reverse
+        // class is decided so we know which side of the dropdown to anchor.
+        if ($dropdown.closest('.toolbar').length === 0
+            && $dropdown.closest('.popup-content').length > 0) {
+          var rect = $dropdown[0].getBoundingClientRect();
+          var $list = $dropdown.find('.list');
+          $list.css('left', rect.left);
+          $list.css('min-width', $dropdown.outerWidth() + 'px');
+          $list.css('top', $dropdown.hasClass('reverse')
+              ? rect.top - $maxListHeight - 5
+              : rect.bottom);
+        }
+
       } else {
         $dropdown.trigger('focus');
       }

src/tests/frontend-new/specs/pad_settings.spec.ts

@@ -179,15 +179,16 @@ test.describe('creator-owned pad settings', () => {
     await expect(popupContent).toBeVisible();
     await expect(page.locator('#pad-settings-section')).toBeVisible();
 
-    const dims = await popupContent.evaluate((el) => ({
-      overflowY: getComputedStyle(el).overflowY,
-      scrolls: el.scrollHeight > el.clientHeight,
-    }));
-    expect(dims.overflowY).toBe('auto');
-    expect(dims.scrolls).toBe(true);
-
-    await page.locator('#delete-pad').scrollIntoViewIfNeeded();
-    await expect(page.locator('#delete-pad')).toBeInViewport();
+    // The popup must declare scrollable overflow (otherwise the previous bug
+    // recurs even if content happens to fit by coincidence).
+    await expect(popupContent).toHaveCSS('overflow-y', 'auto');
+
+    // Delete pad sits at the bottom of Pad-wide Settings; on a short viewport
+    // it starts off-screen and must become reachable by scrolling the popup.
+    const deletePad = page.locator('#delete-pad');
+    await expect(deletePad).not.toBeInViewport();
+    await deletePad.scrollIntoViewIfNeeded();
+    await expect(deletePad).toBeInViewport();
   });
 
   // #7592: ticking "Disable chat" must visibly disable the dependent