fix: visual defects in tables, dropdowns and the table of contents

[l-limon-l]

Hi! Thanks for this theme — I've been running it on my router and ended up fixing a batch of visual defects along the way. Sending them back in case they're useful.

Everything here was measured on a live OpenWrt 25.12 router (ASUS RT-AX52, LuCI 26.217) rather than eyeballed. I run LuCI in Russian, which is what surfaced most of these: longer words expose the places where the layout has no answer for overflow. The fixes are not locale-specific — English simply hides the same problems.

Scope: two source files only, .dev/src/media/main.css and .dev/src/resource/menu-outline.js. I have not rebuilt htdocs/ — your Build and Commit workflow regenerates it on push to master, and leaving it out keeps this diff reviewable.

Layout

Content column had a max-w-[720px] cap	On a 2560px viewport that left 384px unused while LuCI's own tables overflowed their container
Empty TOC still reserved its gutter	Another 304px of content width on pages that build no TOC
Tables placed directly in .cbi-section were clipped by nobody	On the UPnP page a 933px table in a 752px column spilled 181px right, sliding under the fixed TOC

Typography and tables

• word-break: break-all → overflow-wrap: anywhere. break-all splits every word at whatever character meets the edge — "Статический" wrapped as "Статическ / ий". anywhere breaks only what genuinely does not fit, and still lets a column shrink below its longest word, which is what break-all was there for.
• Rows that wrap to several lines align every cell to the top. Middle alignment left short cells floating against a block of text; single-line rows render identically either way.
• The DHCP leases table loses table-layout: fixed. It gave the actions column 107px for a 113px button — clipping "Reserve IP" — and left the table 5px wider than its box, i.e. a scrollbar with nothing to scroll.

Dropdowns

This was the largest piece. .cbi-dropdown is positioned by LuCI itself, .outline-select by the theme, so two dropdowns on one form behaved differently, and inside a modal the list was clipped by the modal's overflow box.

Both now share one positioner and render in the top layer via the Popover API:

• pinned to the trigger in viewport coordinates, clamped to stay on screen
• flipped above only when the panel truly does not fit below, decided from the panel's own height rather than a flat 200px guess that used to drop panels on top of their own field
• followed per frame while open — scroll and resize handlers alone left a panel stranded at the top of the window while its field sat mid-page
• handed back to LuCI on close. This one is subtle: LuCI swaps the dropdown and preview classes between its two <ul>s, so marking one as a popover permanently also caught the closed-state value display, which then floated free of the page (measured at x=3359 on a 2560px viewport).

.cbi-dropdown also gets the same chevron and the same 180° turn on open that .outline-select already had.

Table of contents

• Entries read "System" instead of "SystemHide" — the collapse toggle LuCI puts inside section headings was being swept up with the title.
• Sections that render empty (DSL on hardware without it) are no longer listed; their entry could not be scrolled to.
• Every entry is now reachable. The highlight moved only once a section's top edge climbed past the header, which is impossible on a page that scrolls less than its sections are tall — the firewall page scrolls 470px while its second section starts at 796px and its third at 1081px. The fold now sits a third of the way down the viewport, and clicking an entry pins it for the length of the scroll.
• The fixed panel measures its position after the entry list exists. Measuring earlier, while the gutter was still hidden, pinned it to the far left of the window.

Forms and lists

• Form controls share a width floor, so a column of them no longer starts at six different offsets (measured 1048, 1112, 1140, 1190, 1225, 1297 down one page).
• Select replacement and description placement observe document.body rather than #maincontent. LuCI mounts #modal_overlay on body, so selects inside modals kept their unstyled native look and field descriptions only moved into the label column once an unrelated poll mutated the page behind the modal — visible as the description jumping columns a moment after the modal opened.
• List badges and interface boxes take their column's width instead of each sizing to its own content (badges measured 96, 138, 94 and 141px wide in one four-row table).
• Firewall zone pairs keep their width on narrow screens instead of shrinking below their own badges.

Happy to split this into smaller PRs, drop any part you disagree with, or adjust to your preferences — just say the word.