settings: the Picture page deck in two columns, the ISP card in two

[widgetii]

Follow-up to #585 and #583, from a design audit of the Picture page.

Deck: three columns → two.

• Orientation had its own column, the height of Tone's (331px), for one row of four buttons. It now sits under Tone in the left column.
• The tone figures (range used, lost in shadows/highlights, light to spare) were a 2×2 grid in Tone's 17rem column with wrapped labels. They read the brightness histogram, so they now sit under Luma, one flex row (single-line labels at full width, wrapping inside the row when narrower, 2×2 on a phone).

ISP / Exposure card: one column → two.

• The fold lived inside the card's first column, so the card fell under SOLO_MAX and drew one narrow column, and the fold's 11 rows ran down it when opened. The fold now sits under both columns, full width, with its own .mj-cols dealt on open; the rows above it are exempt from solo (data-solo=off), so Exposure mode and Slow shutter sit side by side.
• For tuning engineers moves ahead of How it reacts: the cut is taken only between headings, and last it left 4 rows beside 7 (560 vs 1030px).

Checked on the ev300 at 1440, 1100 and 390 (touch): deck 324px (was 333) with no empty column; fold opens into two balanced columns; no console errors.

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Rebalance Picture deck and exposure settings into two columns

✨ Enhancement 📝 Documentation 🕐 20-40 Minutes

AI Description

• Reorganizes the Picture deck into two balanced columns of related controls and measurements.
• Moves the exposure fold full-width and deals expanded settings across two columns.
• Reorders tuning settings to balance group-aware column cuts.

Diagram

graph TD
  A["Picture Page"] -->|renders| B["Two Column Deck"] -->|left side| C["Tone and Orientation"]
  B -->|right side| D["Luma and Figures"]
  A -->|renders| E["ISP Card"] -->|shows| F["Top Controls"]
  E -->|places below| G["Exposure Fold"] -->|deals on open| H["Balanced Columns"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. CSS Grid with spanning fold

• ➕ Could express deck placement and full-width fold spanning primarily in CSS.
• ➕ May reduce explicit DOM reparenting for visual placement.
• ➖ Would bypass or duplicate the existing JavaScript column-dealing behavior.
• ➖ Group-aware balancing and dynamic visibility would remain difficult to express in CSS.
• ➖ DOM order might not match the intended semantic relationship between histogram and figures.

2. Static exposure group columns

• ➕ Would avoid height measurement and redistribution when opening the fold.
• ➕ Would make each group’s destination deterministic.
• ➖ Camera-specific rows and conditional visibility could produce visibly uneven columns.
• ➖ Requires maintaining manual column assignments as exposure settings evolve.

Recommendation: Keep the PR’s nested .mj-cols approach. It reuses the established group-aware dealer, preserves responsive stacking, and accommodates variable camera capabilities better than static assignments; dealing only when the fold opens also ensures measurable row heights.

Files changed (4) +99 / -33

Enhancement (3) +92 / -30

bootstrap.override.cssStyle the Picture deck as two responsive columns +39/-16

Style the Picture deck as two responsive columns

• Changes the deck proportions, stacks Orientation below Tone, and gives Luma its own divider treatment. Converts tone figures to a flexible single row that wraps into a two-by-two layout on phones.

www/a/bootstrap.override.css

mj-settings.jsReparent Picture measurements and add nested fold columns +47/-12

Reparent Picture measurements and add nested fold columns

• Moves Orientation under Tone and relocates tone figures beneath the Luma histogram. Places group folds after the parent columns, creates nested columns for folded rows, disables solo mode for the leading controls, and deals the nested columns when opened.

www/a/mj-settings.js

mj-tree.jsReorder exposure groups for balanced column dealing +6/-2

Reorder exposure groups for balanced column dealing

• Moves the external-tuner group before “How it reacts” so heading-preserving column cuts produce more balanced advanced exposure columns.

www/a/mj-tree.js

Documentation (1) +7 / -3

settings-page.mdDocument the full-width, two-column exposure fold +7/-3

Document the full-width, two-column exposure fold

• Updates the ISP group order and explains that advanced exposure settings open below both card columns. Documents the solo exemption and heading-aware balancing rationale.

docs/settings-page.md

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Orientation-only cards get a 24px gap ✓ Resolved 🐞 Bug ≡ Correctness

Description

renderLive now nests colGeo inside colScene, but the heading-margin reset only matches groups
that are direct children of .mj-live-col. When firmware exposes the mirror and flip controls
without any recognized Tone integers, Orientation is the first visible group yet retains the default
1.5rem top margin above its heading.

Code

www/a/mj-settings.js[3099]

+		colScene.appendChild(colGeo);

Evidence

The feature detection permits useGeo whenever mirror and flip exist, independently of hasTone,
and the new append places that group one wrapper below the live column. The default group-heading
rule supplies a 1.5rem top margin, while the existing zero-margin selector only targets a
.mj-live-grp directly beneath .mj-live-col, so it cannot match the new Orientation structure.

www/a/mj-settings.js[2805-2811]
www/a/mj-settings.js[3088-3099]
www/a/bootstrap.override.css[1442-1447]
www/a/bootstrap.override.css[2607-2614]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Orientation is now nested inside `.mj-live-geo`, so an Orientation-only deck no longer matches the existing first-heading margin reset and renders an unnecessary 1.5rem top gap.
## Fix Focus Areas
- www/a/mj-settings.js[3096-3099]
- www/a/bootstrap.override.css[2593-2601]
- www/a/bootstrap.override.css[2607-2614]
## Recommended Fix
Extend the first-group heading rule to cover a `.mj-live-geo` wrapper when it is the first child of a live column, resetting that heading's top margin without adding live-column padding to the nested wrapper.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Tip of the day

💡 Did you know, you can enable the Remediation agent and Qodo fixes findings in a dedicated fix PR

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[widgetii]

Taken: the first-heading reset also matches .mj-live-col > .mj-live-geo:first-child, the case where a camera has mirror and flip but no Tone.