diff --git a/docs/reports/2026-09-12-ui-visual-review-delivery.md b/docs/reports/2026-09-12-ui-visual-review-delivery.md
index 9984c5b4..cfc18c34 100644
--- a/docs/reports/2026-09-12-ui-visual-review-delivery.md
+++ b/docs/reports/2026-09-12-ui-visual-review-delivery.md
@@ -87,6 +87,16 @@ Metadata updated/Description coverage e Operations al punto medio sui layout amp
Passati 9 scenari Playwright con assert geometrici a 390, 649, 768, 1280 e 1600 px.
Nessuna modifica funzionale; aggiornamento Docker limitato al frontend di revisione.
+## Follow-up: pannello del contesto globale (2026-09-13)
+
+Il pannello espanso Workspace/Model ora usa gli stessi token di margine esterno (20 px)
+e padding interno (16 px) del catalogo, con superficie rientrata e controlli sull'asse
+testuale a 36 px. Allineamento curato con Impeccable e verificato alle cinque larghezze.
+Rimosse la frase sulle ultime scelte e le indicazioni di provenienza sotto i selettori
+(Installation default / Last choice). Logica di selezione, persistenza, default,
+blocchi operativi e messaggi di errore invariati. Passati 9 scenari Playwright con
+controlli sul pannello aperto, sui margini e sull'assenza delle diciture rimosse.
+
## Verifica
| Verifica | Esito |
diff --git a/frontend/e2e/ui-visual-review.spec.ts b/frontend/e2e/ui-visual-review.spec.ts
index 456d35e4..1367ca7a 100644
--- a/frontend/e2e/ui-visual-review.spec.ts
+++ b/frontend/e2e/ui-visual-review.spec.ts
@@ -168,6 +168,20 @@ for (const width of [390, 649, 768, 1280, 1600]) {
expect(Math.abs(summary!.x - gridLabel!.x)).toBeLessThan(1);
expect(Math.abs(summaryBlock!.width - gridBlock!.width)).toBeLessThan(1);
expect(Math.abs(navigationBlock!.width - gridBlock!.width)).toBeLessThan(1);
+ const contextTrigger = page.getByRole("button", { name: /Working context/ });
+ await contextTrigger.click();
+ const contextBody = page.locator(".thot-context-body");
+ await expect(contextBody).toBeVisible();
+ await expect(contextBody).not.toContainText("Your last choices take precedence");
+ await expect(contextBody).not.toContainText("Installation default");
+ await expect(contextBody).not.toContainText("Last choice");
+ const contextBlock = await contextBody.boundingBox();
+ const workspaceSelect = await contextBody.getByRole("combobox", { name: "Workspace", exact: true }).boundingBox();
+ expect(Math.abs(contextBlock!.x - summaryBlock!.x)).toBeLessThan(1);
+ expect(Math.abs(workspaceSelect!.x - summary!.x)).toBeLessThan(1);
+ expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
+ await page.screenshot({ path: testInfo.outputPath("Context-expanded.png") });
+ await contextBody.getByRole("button", { name: "Done", exact: true }).click();
expect(Math.abs(catalog!.x - summary!.x)).toBeLessThan(1);
const workArea = await page.locator(".thot-fleet-ledger__workspace").boundingBox();
if (workArea!.width >= 768) {
diff --git a/frontend/src/shell/WorkingContextShelf.css b/frontend/src/shell/WorkingContextShelf.css
index a54220ed..d4099d38 100644
--- a/frontend/src/shell/WorkingContextShelf.css
+++ b/frontend/src/shell/WorkingContextShelf.css
@@ -1,28 +1,26 @@
-.thot-context-layout { display: flex; flex-direction: column; min-width: 0; height: var(--thoth-app-height, 100dvh); overflow: hidden; }
+.thot-context-layout { --thoth-content-gutter: 1.25rem; --thoth-content-padding: 1rem; display: flex; flex-direction: column; min-width: 0; height: var(--thoth-app-height, 100dvh); overflow: hidden; }
.thot-context-layout > .thot-app-shell { flex: 1; height: auto; min-height: 0; }
.thot-context-shelf { flex: none; min-width: 0; max-height: 60%; overflow: auto; border-bottom: 1px solid oklch(var(--border)); background: oklch(var(--muted)/.5); container: working-context / inline-size; }
-.thot-context-trigger { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px 24px; text-align: left; }
+.thot-context-trigger { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px calc(var(--thoth-content-gutter) + var(--thoth-content-padding)); text-align: left; }
.thot-context-summary { min-width: 0; flex: 1; }
.thot-context-summary small { display: block; font: 500 var(--text-meta)/1.5 var(--font-sans); color: oklch(var(--muted-foreground)); }
.thot-context-summary strong { display: block; font: 600 .875rem/1.6 var(--font-sans); overflow-wrap: anywhere; }
.thot-context-summary strong span { padding-inline: 12px; color: oklch(var(--muted-foreground)); }
.thot-context-action { display: flex; align-items: center; gap: 8px; color: oklch(var(--primary)); font-size: .75rem; font-weight: 600; }
.thot-context-trigger[aria-expanded=true] .thot-context-action > svg:last-child { transform: rotate(180deg); }
-.thot-context-body { padding: 0 24px 20px; }
+.thot-context-body { margin: 0 var(--thoth-content-gutter) var(--thoth-content-gutter); padding: var(--thoth-content-padding); background: oklch(var(--card)); }
.thot-context-body[hidden] { display: none; }
-.thot-context-explanation { max-width: none; margin: 0 0 20px; font-size: var(--text-control); line-height: 1.6; color: oklch(var(--muted-foreground)); }
.thot-context-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.thot-context-fields label { display: grid; min-width: 0; gap: 8px; font-size: var(--text-control); }
.thot-context-fields label > span { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.thot-context-fields select { min-width: 0; width: 100%; padding: 9px 12px; border: 1px solid oklch(var(--border)); border-radius: 6px; background: oklch(var(--card)); }
-.thot-context-fields small, .thot-context-body > p[role] { color: oklch(var(--muted-foreground)); font-size: .75rem; line-height: 1.6; }
+.thot-context-body > p[role] { color: oklch(var(--muted-foreground)); font-size: .75rem; line-height: 1.6; }
.thot-context-body > p[role] { margin-top: 12px; }
.thot-context-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.thot-context-shelf :is(button,select):focus-visible { outline: 2px solid oklch(var(--ring)); outline-offset: 3px; }
.thot-context-shelf select:disabled { opacity: .65; }
@container working-context (max-width: 38rem) {
.thot-context-fields { grid-template-columns: minmax(0,1fr); gap: 14px; }
- .thot-context-trigger { padding: 12px 16px; gap: 10px; }
- .thot-context-body { padding: 0 16px 16px; }
+ .thot-context-trigger { padding-block: 12px; gap: 10px; }
.thot-context-action > span { display: none; }
}
diff --git a/frontend/src/shell/WorkingContextShelf.tsx b/frontend/src/shell/WorkingContextShelf.tsx
index d2a204b4..cd9cee29 100644
--- a/frontend/src/shell/WorkingContextShelf.tsx
+++ b/frontend/src/shell/WorkingContextShelf.tsx
@@ -18,17 +18,16 @@ export function WorkingContextShelf({ context, locked, onWorkspace, onModel }: {
{locked &&
Your last choices take precedence over installation defaults. Workspace and model are remembered independently.
Workspace and model are locked until the current operation finishes.
} diff --git a/frontend/src/shell/database-management/FleetLedgerShell.css b/frontend/src/shell/database-management/FleetLedgerShell.css index de53b284..d964dd1c 100644 --- a/frontend/src/shell/database-management/FleetLedgerShell.css +++ b/frontend/src/shell/database-management/FleetLedgerShell.css @@ -14,8 +14,8 @@ } .thot-fleet-ledger__workspace { - --fleet-block-gutter: 1.25rem; - --fleet-block-padding: 1rem; + --fleet-block-gutter: var(--thoth-content-gutter, 1.25rem); + --fleet-block-padding: var(--thoth-content-padding, 1rem); --fleet-summary-inset: calc(var(--fleet-block-gutter) + var(--fleet-block-padding)); display: flex; flex: 1;