diff --git a/e2e/databaseResultSpacing.spec.ts b/e2e/databaseResultSpacing.spec.ts new file mode 100644 index 000000000..d8771a568 --- /dev/null +++ b/e2e/databaseResultSpacing.spec.ts @@ -0,0 +1,27 @@ +import { expect, test } from "./fixtures"; + +test("selected result tabs are inset from the Services pane edge", async ({ workbench: page }) => { + await page.evaluate(async () => { + const storePath = "/src/features/database/store.ts"; + const contributionsPath = "/src/workbench/contributions.ts"; + const { useDatabase, RESULTS_VIEW } = await import(storePath); + const { showServiceView } = await import(contributionsPath); + useDatabase.setState({ + loaded: true, + results: [], + activeResult: 0, + output: [{ id: 1, time: 0, kind: "info", text: "Query completed" }], + }); + showServiceView(RESULTS_VIEW); + }); + const output = page + .getByRole("tablist", { name: "Results", exact: true }) + .getByRole("tab", { name: "Output", exact: true }); + await expect(output).toHaveAttribute("aria-selected", "true"); + const inset = await output.evaluate((element) => { + const strip = element.closest('[role="tablist"]')?.parentElement; + if (!strip) throw new Error("Result tab strip is missing"); + return element.getBoundingClientRect().left - strip.getBoundingClientRect().left; + }); + expect(inset).toBeGreaterThan(0); +}); diff --git a/src/features/database/Database.module.css b/src/features/database/Database.module.css index a5490a9af..fec434743 100644 --- a/src/features/database/Database.module.css +++ b/src/features/database/Database.module.css @@ -133,6 +133,9 @@ flex-direction: column; min-height: 0; } +.resultTabs { + padding-inline: var(--space-2); +} .toolbar { display: flex; align-items: center; diff --git a/src/features/database/ResultsView.tsx b/src/features/database/ResultsView.tsx index 43f55881a..9aa61e6c5 100644 --- a/src/features/database/ResultsView.tsx +++ b/src/features/database/ResultsView.tsx @@ -665,6 +665,7 @@ export function ResultsView() { return (