fix: improve workspace manager navigation and sizing

This commit is contained in:
2026-08-14 21:20:41 +02:00
parent 900faad983
commit c9c30563f2
2 changed files with 27 additions and 5 deletions
+15 -3
View File
@@ -70,15 +70,27 @@ beforeEach(() => {
); );
}); });
test("uses at least sixty percent of the viewport on desktop", () => { test("uses a tall viewport area and keeps the workspace content scrollable", () => {
renderManager(); renderManager();
expect(screen.getByRole("dialog")).toHaveClass( const dialog = screen.getByRole("dialog");
"h-[70vh]", expect(dialog).toHaveClass(
"h-[86vh]",
"w-[94vw]", "w-[94vw]",
"sm:w-[70vw]", "sm:w-[70vw]",
"max-w-[94vw]", "max-w-[94vw]",
); );
expect(screen.getByRole("main")).toHaveClass("overflow-y-auto");
});
test("offers an internal link back to the initial page", async () => {
const user = userEvent.setup();
const onClose = vi.fn();
renderManager(onClose);
await user.click(screen.getByRole("button", { name: "Back to main page" }));
expect(onClose).toHaveBeenCalledTimes(1);
}); });
test("level one explains the read-only Git sequence and the repository update button", async () => { test("level one explains the read-only Git sequence and the repository update button", async () => {
+12 -2
View File
@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { import {
AlertCircle, AlertCircle,
ArrowLeft,
CheckCircle2, CheckCircle2,
ClipboardCheck, ClipboardCheck,
FlaskConical, FlaskConical,
@@ -214,9 +215,18 @@ export function WorkspaceManager({ open, onClose }: { open: boolean; onClose: ()
<Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) close(); }}> <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) close(); }}>
<DialogContent <DialogContent
showCloseButton={false} showCloseButton={false}
className="h-[70vh] w-[94vw] max-h-[90vh] max-w-[94vw] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0 sm:w-[70vw] sm:max-w-[94vw]" className="h-[86vh] w-[94vw] max-h-[92vh] max-w-[94vw] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden p-0 sm:w-[70vw] sm:max-w-[94vw]"
> >
<DialogHeader className="border-b border-border/70 px-6 pb-4 pt-5 pr-12"> <DialogHeader className="border-b border-border/70 px-6 pb-4 pt-5 pr-12">
<Button
type="button"
size="sm"
variant="link"
className="w-fit px-0"
onClick={close}
>
<ArrowLeft />Back to main page
</Button>
<DialogTitle>Workspace management</DialogTitle> <DialogTitle>Workspace management</DialogTitle>
<DialogDescription> <DialogDescription>
Read, validate, and complete the runtime configuration of workspaces supplied by the installation repository. Read, validate, and complete the runtime configuration of workspaces supplied by the installation repository.
@@ -251,7 +261,7 @@ export function WorkspaceManager({ open, onClose }: { open: boolean; onClose: ()
</div> </div>
</nav> </nav>
<main className="min-w-0 overflow-y-auto px-6 py-5"> <main className="min-h-0 min-w-0 overflow-y-auto overscroll-contain px-6 py-5">
{notice && ( {notice && (
<p role="status" className="mb-4 flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-2 text-sm"> <p role="status" className="mb-4 flex items-center gap-2 rounded-md border border-border bg-muted/50 px-3 py-2 text-sm">
<CheckCircle2 className="size-4 text-primary" />{notice} <CheckCircle2 className="size-4 text-primary" />{notice}