From 8707ae1d46577a9236ef06004070e019378ad8d9 Mon Sep 17 00:00:00 2001
From: mptyl <mp@tylconsulting.it>
Date: Sat, 5 Sep 2026 10:43:49 +0200
Subject: [PATCH] fix(frontend): widen management work-area panels

---
 frontend/src/shell/PiManagement.test.tsx     | 1 +
 frontend/src/shell/PiManagement.tsx          | 1 +
 frontend/src/shell/WorkAreaPanel.css         | 7 ++++++-
 frontend/src/shell/WorkAreaPanel.tsx         | 2 +-
 frontend/src/shell/WorkspaceManager.test.tsx | 1 +
 frontend/src/shell/WorkspaceManager.tsx      | 1 +
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shell/PiManagement.test.tsx b/frontend/src/shell/PiManagement.test.tsx
index a0b8811a..b525261b 100644
--- a/frontend/src/shell/PiManagement.test.tsx
+++ b/frontend/src/shell/PiManagement.test.tsx
@@ -34,6 +34,7 @@ test("shows the catalog default as read-only installation state", async () => {
   const dialog = screen.getByRole("dialog", { name: "Pi management" });
   expect(dialog).toHaveAttribute("aria-modal", "false");
   expect(dialog).toHaveAttribute("data-work-area-panel");
+  expect(dialog).toHaveAttribute("data-width", "expanded");
   expect(await screen.findByText("Pi 0.80.3")).toBeVisible();
   expect(screen.getByTestId("pi-readiness-rail")).toHaveTextContent("Runtime ready");
   expect(screen.getByRole("status", { name: "Pi readiness" })).toHaveTextContent("Ready");
diff --git a/frontend/src/shell/PiManagement.tsx b/frontend/src/shell/PiManagement.tsx
index a9e0a955..f2d58968 100644
--- a/frontend/src/shell/PiManagement.tsx
+++ b/frontend/src/shell/PiManagement.tsx
@@ -329,6 +329,7 @@ export function PiManagement({ open, onClose }: { open: boolean; onClose: () =>
     <WorkAreaPanel
       open={open}
       ariaLabel="Pi management"
+      width="expanded"
       eyebrow="Installation controls"
       title="Pi management"
       description="Review the bundled runtime, inspect the catalog default, and test its provider configuration."
diff --git a/frontend/src/shell/WorkAreaPanel.css b/frontend/src/shell/WorkAreaPanel.css
index 0ea6bf61..01058653 100644
--- a/frontend/src/shell/WorkAreaPanel.css
+++ b/frontend/src/shell/WorkAreaPanel.css
@@ -32,6 +32,10 @@
   container-type: inline-size;
 }
 
+.thot-work-area-panel[data-width="expanded"] {
+  width: 80%;
+}
+
 .thot-work-area-panel:focus-visible {
   outline: 2px solid oklch(var(--ring));
   outline-offset: -2px;
@@ -131,7 +135,8 @@
 }
 
 @container work-area (max-width: 47.999rem) {
-  .thot-work-area-panel {
+  .thot-work-area-panel,
+  .thot-work-area-panel[data-width="expanded"] {
     inset-block: 0.5rem;
     width: calc(100% - 1rem);
   }
diff --git a/frontend/src/shell/WorkAreaPanel.tsx b/frontend/src/shell/WorkAreaPanel.tsx
index 630b714d..76f8dc64 100644
--- a/frontend/src/shell/WorkAreaPanel.tsx
+++ b/frontend/src/shell/WorkAreaPanel.tsx
@@ -127,7 +127,7 @@ export interface WorkAreaPanelProps {
   footer?: ReactNode;
   footerClassName?: string;
   busy?: boolean;
-  width?: "standard" | "wide";
+  width?: "standard" | "wide" | "expanded";
   className?: string;
   catalogMarkers?: boolean;
 }
diff --git a/frontend/src/shell/WorkspaceManager.test.tsx b/frontend/src/shell/WorkspaceManager.test.tsx
index c50652d6..ac81754c 100644
--- a/frontend/src/shell/WorkspaceManager.test.tsx
+++ b/frontend/src/shell/WorkspaceManager.test.tsx
@@ -142,6 +142,7 @@ test("uses the shared modeless work-area panel and keeps workspace content scrol
   const dialog = screen.getByRole("dialog", { name: "Workspace management" });
   expect(dialog).toHaveAttribute("aria-modal", "false");
   expect(dialog).toHaveAttribute("data-work-area-panel");
+  expect(dialog).toHaveAttribute("data-width", "expanded");
   expect(dialog.querySelectorAll(':scope > [data-work-area-panel-region="header"]')).toHaveLength(1);
   expect(dialog.querySelectorAll(':scope > [data-work-area-panel-region="body"]')).toHaveLength(1);
   expect(dialog.querySelectorAll(':scope > [data-work-area-panel-region="footer"]')).toHaveLength(0);
diff --git a/frontend/src/shell/WorkspaceManager.tsx b/frontend/src/shell/WorkspaceManager.tsx
index 5d681809..9b8ccccb 100644
--- a/frontend/src/shell/WorkspaceManager.tsx
+++ b/frontend/src/shell/WorkspaceManager.tsx
@@ -391,6 +391,7 @@ export function WorkspaceManager({
     <WorkAreaPanel
       open={open}
       ariaLabel="Workspace management"
+      width="expanded"
       eyebrow="Workspace configuration"
       title="Workspace management"
       description="Read, validate, and complete the runtime configuration of workspaces supplied by the installation repository."