feat(settings): tighten the surface, put Add Case on it, retire the tab chrome

Three things, all on the same surface.

**Tighter.** The shell drops to 760x620 (was 840x700) and the density comes
down with it: rail 176px, doc padding 15px, row padding 5px 10px, group gaps
3px, section head 0.88rem, row label 0.76rem, description 0.645rem. The model
cards were the biggest block in the document and shrink the most (6px 8px
padding, 0.72rem name). The toggle switches keep their size on purpose - only
the space around them was the problem.

**Checkboxes stay checkboxes.** The respawn cycle steps go back to real
checkboxes in a row card (`.set-checks` / `.set-check`) rather than the chips
they briefly became: they are numbered steps of one sequence, not a set of
independent tags, and chips read as the latter.

**Add Case joins the surface.** Same shell, rail and sections; its rail
switches panels like Session Options'. The six panels keep their legacy
`.form-row` markup - every id in them is read back by session-ui.js, so
restructuring the forms would be a lot of risk for no visual gain. Instead an
adapter block scoped to `#createCaseModal .set-doc` maps the old primitives
onto the look: a form row paints as a row card, its label as a row label, its
`.form-hint` as a row description, `<details class="advanced-options">` as a
collapsed group head. `.form-row` everywhere else is untouched.

With that, `.modal-tabs` / `.modal-tab-btn` / `.modal-tab-content` have no
users left, so their CSS is deleted from both stylesheets and the guard in
test/app-settings-structure.test.ts flips from "the settings modal must not
steal these shared classes" to "nothing uses them any more" - a reappearance
now means a modal drifted back off the shared surface.
This commit is contained in:
Codeman maintainer
2026-08-10 11:43:55 +02:00
parent 6ccab925b1
commit 78356d7fd0
7 changed files with 501 additions and 370 deletions
+8 -8
View File
@@ -122,15 +122,15 @@ describe('App Settings modal structure', () => {
expect(modal).toContain('id="appSettingsOpusContext1m"');
});
it('never hides sections behind .modal-tab-content (that class means display:none)', () => {
it('has retired the modal-tab chrome everywhere, not just here', () => {
// Session Options and Add Case moved onto this same `set-*` surface, so the
// old tab classes have no users left. A reappearance means a modal drifted
// back off the shared surface (or the dead CSS was resurrected).
expect(settingsModal()).not.toContain('modal-tab-content');
});
it('leaves the shared modal tab classes to the other modals', () => {
// #sessionOptionsModal and #createCaseModal still use .modal-tabs; the
// settings rail must not restyle them out from under those.
expect(settingsModal()).not.toContain('class="modal-tabs"');
expect(html).toContain('<div class="modal-tabs">');
expect(html).not.toContain('class="modal-tabs"');
expect(html).not.toContain('modal-tab-btn');
const css = readFileSync(resolve(publicDir, 'styles.css'), 'utf8');
expect(css).not.toContain('.modal-tab-btn {');
});
it('exposes the rail hooks admin-ui.js injects the Users section into', () => {
+2 -2
View File
@@ -91,7 +91,7 @@ describe('Session Options modal structure', () => {
expect(modal).not.toContain('modal-tab-content');
// The `set-*` rules are shared by both modals through one :is() scope.
const css = readFileSync(resolve(publicDir, 'styles.css'), 'utf8');
expect(css).toContain(':is(#appSettingsModal, #sessionOptionsModal) .set-row {');
expect(css).toContain('#sessionOptionsModal .set-section.hidden {');
expect(css).toContain(':is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row {');
expect(css).toContain(':is(#sessionOptionsModal, #createCaseModal) .set-section.hidden {');
});
});