fix: improve workspace manager navigation and sizing
This commit is contained in:
@@ -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 () => {
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user