Panel restructure

[jamesmisson]

This is a proposal for a new arrangement of the panel divs that has a few benefits for the feel of UV and for ease of future UI work.

Currently the mainPanel contains leftPanel, centerPanel, and rightPanel as siblings in a row. This means that when left and right panels are opened/closed, the center panel resizes, making the OSD image briefly flicker and transform.

This PR puts the OSD viewer in a new backgroundPanel which sits behind the left, center, and right panels, which are contained in a new overlayPanels div. The centerPanel is used as a transparent container for the various bits and pieces that overlay the image: image control buttons, paging buttons, OSD navigator, page mode buttons. This enables them to behave as authentic overlays rather than the illusion of overlays used in the current version of UV, which I think gives a more polished feel in general and prevents the image flicker on panel resize.

Besides cosmetic improvements, embracing the third dimension will allow more economical use of space when we try different arrangements of the transcription panel UI (e.g. it makes user-resizable panels easier to implement, and allows content to expand over other content if needs be).

Only the OSD extension has been given this treatment here, it currently breaks the AV extensions.

This depends on the new header and buttons PR here: #1557

EDIT: Some additional features:

• the go home button centers the image between the panels
• left panel width is now resizable (needed for displaying search result contexts in the future). Size is stored in local storage.
• panels no longer animate if open on initial load
• preventing panel animation on initial load makes the initial image positioning a bit more predictable/controllable, so this set-up has improved initial image alignment
• some minimal design tweaks to modernize things and improve visibility (slight drop shadow on panels and UI overlay components, blurred transparency on buttons)

To do

• Fix title (vertical overflow cut off, gradient needs tweaking)
• Ensure 2-up view is centered when navigating from front page (1-up) to next page
• Replace goHome icon with recenter image icon (in 1557)
• Add open/close left/right panel icons
• Add prev/next page icons
• Fix loading spinner visibility
• Make sure continuous behavior behaves continuously Issue 1503, fix continuous behavior #1519
• Make sure other extensions are behaving as normal
• Consider renaming backgroundPanel and overlayPanel (or their contents) to something clearer
• Code clean-up (remove temporary comments, refactor css)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
universalviewer	Ready	Preview, Comment	Jan 21, 2026 3:58pm
universalviewer.dev	Ready	Preview, Comment	Jan 21, 2026 3:58pm

[vercel]

@jamesmisson is attempting to deploy a commit to the BL UV team Team on Vercel.

A member of the Team first needs to authorize it.

[demiankatz]

@jamesmisson, just a suggestion: I tend to find it most helpful to put TODO lists in the top comment so they don't get lost when GitHub starts collapsing things (which it tends to do in large PRs like this one if a lot of conversation occurs).