fix(7696): nice-select reverse list disappeared in scrolled popup

When a nice-select inside a popup-content scroll container sits in the
lower half of the viewport, the JS adds the .reverse class so the list
opens upward. The default .reverse rule sets bottom: calc(100% + 5px),
which is fine when the list is position:absolute relative to its parent
— but with the position:fixed treatment the popup branch uses, that
percentage resolves against the viewport and pushes the list ~100vh
above the screen, so it appears not to open at all until you scroll to
the bottom of the popup (where .reverse no longer triggers).

Override the rule for both .toolbar and .popup so .reverse drops back to
bottom: auto and JS-set `top` controls placement, with a JS belt-and-
braces also setting `bottom: auto` inline.

Adds a Playwright regression test that scrolls the settings popup to
the bottom, opens the Pad-wide font dropdown, and asserts the list is
both visible and inside the viewport.

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

Author: JohnMcLear

src/static/css/pad/form.css

@@ -141,6 +141,14 @@ select, .nice-select {
   top: auto;
   left: auto;
 }
+/* The default .reverse rule above sets bottom: calc(100% + 5px) so an
+   absolutely-positioned list opens upward inside its parent. Once the list is
+   position:fixed, that percentage resolves against the viewport instead and
+   would push the list off-screen, so we let JS place it via `top` only. */
+.toolbar .nice-select.reverse .list,
+.popup .nice-select.reverse .list {
+  bottom: auto;
+}
 .nice-select .list:hover .option:not(:hover) {
   background-color: transparent !important;
 }

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

@@ -134,6 +134,9 @@
           var $list = $dropdown.find('.list');
           $list.css('left', rect.left);
           $list.css('min-width', $dropdown.outerWidth() + 'px');
+          // Clear .reverse's `bottom: calc(100% + 5px)` — with position:fixed
+          // it would resolve against the viewport and push the list offscreen.
+          $list.css('bottom', 'auto');
           $list.css('top', $dropdown.hasClass('reverse')
               ? rect.top - $maxListHeight - 5
               : rect.bottom);

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

@@ -191,6 +191,35 @@ test.describe('creator-owned pad settings', () => {
     await expect(deletePad).toBeInViewport();
   });
 
+  // #7696 follow-up: the Pad-wide font/language nice-select dropdowns sit
+  // near the bottom of the popup, so opening one triggers the .reverse path
+  // (open upward). Floating the list with position:fixed must not pick up
+  // the default `.reverse { bottom: calc(100% + 5px) }` rule, which would
+  // resolve against the viewport and place the list off-screen.
+  test('Pad-wide font dropdown opens visibly when popup is scrolled to bottom', async ({page}) => {
+    await page.setViewportSize({width: 900, height: 500});
+    await goToNewPad(page);
+    await showSettings(page);
+
+    // Force the font dropdown into the lower portion of the viewport so
+    // .reverse triggers and the list opens upward.
+    await page.locator('#settings > .popup-content').evaluate((el) => {
+      el.scrollTop = el.scrollHeight;
+    });
+
+    const fontDropdown = page.locator('#padsettings-viewfontmenu + .nice-select');
+    await expect(fontDropdown).toBeInViewport();
+
+    await fontDropdown.click();
+    const list = fontDropdown.locator('.list');
+    await expect(list).toBeVisible();
+    await expect(list).toBeInViewport();
+
+    // The first option must be reachable so users can actually pick a font.
+    await fontDropdown.locator('.option').first().click();
+    await expect(fontDropdown).not.toHaveClass(/open/);
+  });
+
   // #7592: ticking "Disable chat" must visibly disable the dependent
   // "Chat always on screen" / "Show Chat and Users" toggles, not just
   // make the underlying inputs non-interactive.