Cap content-area height on every page, fix scroll bugs, sidebar accordion

- Apply the taskbar's max-height/overflow-y:auto treatment to
  #wpbody-content unconditionally, so tall native/Aurora pages (Add
  Plugins, Add User, Profile, Fonts, file editors, Settings, Activity Log,
  Database Explorer, Comments) scroll internally within their frame
  instead of growing past the viewport and scrolling the whole document.
- Fix a Chrome scroll-anchoring bug this surfaced on Add Plugins (page
  loaded scrolled ~1700px into content instead of at the top) via
  overflow-anchor: none.
- Fix a phantom document-level scrollbar with dead space below the frame
  by locking html/body's own overflow, since the sidebar/toolbar are fixed
  and content is only ever meant to scroll internally.
- Make the sidebar's native-menu sections a single-open accordion:
  expanding one now collapses whichever else was open.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
nixpanel
2026-07-03 19:19:17 -05:00
co-authored by Claude Sonnet 5
parent 8153d4397c
commit 73591e0ca4
3 changed files with 102 additions and 20 deletions
+64 -8
View File
@@ -1,6 +1,6 @@
# Aurora Admin v2 — Project Status
_Last updated: 2026-07-03 (late session — Site Editor support, permissions bug fix, Comments sub-app, taskbar rewrite)_
_Last updated: 2026-07-03 (latest session — universal content-area scroll cap, sidebar accordion, scroll-anchoring fix)_
## What this project is
@@ -113,6 +113,17 @@ get back up to speed instead of relying on prior chat history.
over the page gradient. `--aurora-sidebar-gap` is a shared CSS var
(`shell-frame.css`) that the toolbar's `left` offset and `#wpcontent`'s
`margin-left` both add too, so nothing overlaps when the gap changes.
- **Native-menu accordion**: only one WP-native-menu section's submenu is
open at a time (`Sidebar.vue`'s `openId` ref) — expanding one collapses
whichever else was open, instead of the list growing indefinitely as
more sections get expanded. Was previously a `Set` of independently
toggleable ids (each section remembered its own open/closed state);
replaced with a single id so opening any section closes the rest.
Starts on whichever section matches the current page (each nav is a
full page load in this multi-page admin, so this is computed once at
mount, not reactively). The separate "Aurora" branded nav section below
it keeps its own independent expand/collapse state
(`localStorage['aurora-nav-expanded']`) — not part of this accordion.
## Theme system (rewrite — supersedes the old dark_mode 3-state model)
@@ -362,6 +373,41 @@ page navigation via a taskbar.
calc(100vh - toolbar-h - 40px)`, and per spec `min-height` always wins over
a smaller `max-height`; fixed by adding `min-height: 0` to the
taskbar-specific override.
- **Universal content-area height cap** (this session): the taskbar-only
`max-height`/`overflow-y: auto` treatment above is now applied to
`#wpbody-content` unconditionally (not just when `html.aurora-has-taskbar`
is set), capped to `calc(100vh - toolbar-h - 40px)`. Several native and
Aurora pages with a lot of content (Add Plugins, Add User, Profile,
Appearance > Fonts, the file editors, every Settings page, Activity Log,
Database Explorer, Comments) used to grow taller than the viewport and
force the *whole document* to scroll — janky since the sidebar/toolbar
are fixed, so scrolling just moved the content away from them with a lot
of dead space. Now the content card's own box is capped and scrolls
internally, same as the toolbar/taskbar reservations already did.
- **Scroll-anchoring bug this surfaced**: making `#wpbody-content` a real
scroll container exposed a second, unrelated bug on Add Plugins — its
plugin-card grid renders via JS well after first paint, inserting a lot
of content *above* whatever was already visible in the now-scrollable
box. Chrome's scroll anchoring "corrects" for that by silently jumping
`scrollTop` down to compensate, so the page loaded already scrolled
~1700px into the content instead of at the top. Fixed with
`overflow-anchor: none` on `#wpbody-content` (and the taskbar/dashboard-
frame variant) — the standard fix for this class of bug, opting the
container out of anchoring entirely.
- **Phantom document-level scrollbar**: independently, Add Plugins also
left the outer `<html>`/`<body>` scrollable with ~1200px of empty dead
space below the frame, even though every element inside `#wpbody-content`
measured as properly capped to the viewport — narrowed down to some
interaction between the plugin grid's async rendering and the browser's
own scrollable-overflow bookkeeping (root cause not fully pinned down;
forcibly shrinking or hiding `#wpbody-content` reduced but didn't
eliminate it, and no single oversized/mispositioned descendant could be
found). Since the intended design already has the sidebar/toolbar fixed
and every page's real content scrolling *internally* within its own
frame, the document itself was never supposed to scroll at all — fixed
directly by adding `overflow: hidden` to `html.aurora-ready`/`body`,
which removes the dead scroll space outright regardless of what was
causing it.
- **Block editor / Site Editor framing**: neither editor renders inside
`#wpcontent`'s normal box model — each has its own fixed, full-viewport
root (`.interface-interface-skeleton` itself on `post.php`/`post-new.php`;
@@ -475,10 +521,10 @@ page navigation via a taskbar.
## Current state
No task in progress. Earlier this session rebuilt the entire theming system
No task in progress. An earlier session rebuilt the entire theming system
(fixed color presets, gradient backgrounds, "independently-painted gradient"
seam bugs) and added the macOS-style window chrome + taskbar feature
end-to-end (pushed as commits `4a547d2`/`b0b0a99`). Later the same session:
end-to-end (pushed as commits `4a547d2`/`b0b0a99`). Later that same session:
root-caused and fixed the Menu Creator/Activity Log/Role Editor "Sorry, you
are not allowed to access this page" bug (was `remove_submenu_page()`
corrupting WP's own capability lookup); added a 6th sub-app, Comments; fixed
@@ -487,8 +533,18 @@ taskbar from a single sessionStorage slot to a list supporting multiple
minimized windows; and extended the window-chrome/taskbar framing to the
Site Editor (`site-editor.php`), including tracking down a CSS
over-constraint bug (`top`+`height`+`bottom` all set on a fixed-position box
silently ignoring `bottom`) that was making its frame run past the viewport.
All of it was live-verified in Chrome against the LocalWP site. This batch
of changes was uncommitted at the point this doc was last updated — commit
and push it as one of the next steps if not already done by the time this is
read.
silently ignoring `bottom`) that was making its frame run past the viewport
(pushed as commit `8153d43`).
This session: capped every native/Aurora page's content area to the
viewport with internal scrolling instead of letting tall pages grow past it
and scroll the whole document (see "Universal content-area height cap"
above), which surfaced and fixed two more bugs along the way — a Chrome
scroll-anchoring jump on Add Plugins, and a phantom document-level
scrollbar with a large empty gap below the frame. Also made the sidebar's
native-menu sections a single-open accordion instead of letting multiple
stay expanded at once. All of it was live-verified in Chrome against the
LocalWP site (build hot-patched into
`/Users/kris/Local Sites/aurora/.../aurora-admin/app/dist` for iteration —
the repo's source files are the actual edits; that copy is just the
compiled build artifact, not a separate edit surface).