fix(frontend): widen management work-area panels

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");

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."

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);
   }

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;
 }

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);

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."