Step 1: Solution Assessment — SQLite Query Panel Side-by-Side Layout

Problem

On wide screens, the SQLite viewer's query editor and results are stacked vertically (templates/pages/sqlite_viewer.php, [data-role="sqlite-query-panel"]), wasting horizontal space, and the fix should leave room for an easy future front-end toggle (user-facing control, not a server-side setting) between stacked and side-by-side, without building that control now.

Option A: Pure CSS media-query grid switch

• Wrap editor + results in a two-column CSS grid inside the query panel card; collapse to one column below a breakpoint via @media

• Pros: simplest change, no new JS, mirrors the existing min-width: 640px breakpoint precedent in site.css

• Cons: a future manual toggle would need to override the media query with an extra data-attribute layer added later — some rework

Option B: Data-attribute layout keyed like existing toggles

• Add a data-query-layout attribute (default "split"/"stacked" set via a small pre-paint script using matchMedia, same pattern as thread_density_toggle.js/theme_toggle.js); CSS rules key off the attribute instead of the raw media query

• Pros: directly reuses the codebase's two existing, working toggle patterns; adding the actual toggle UI later is a small follow-up (just flip the attribute + localStorage, infra already in place)

• Cons: slightly more setup now (small JS file) even though no toggle UI ships yet

Recommendation

Option B. The feature explicitly anticipates a future user-facing toggle (deferred to a later feature, not built now), and the codebase already has two proven examples of exactly this attribute-driven pattern — building on it now avoids rework later and keeps the eventual toggle a small, low-risk addition.