fix(database): inset result tabs from the Services pane edges (#3013)

The database Results view uses the unpadded compact tab strip, so the selected Output tab touched the Services pane edge. The Results strip now has a --space-2 inline inset of its own; other compact strips are unchanged.

Co-authored-by: Mr0Bread <55754540+Mr0Bread@users.noreply.github.com>

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

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;

src/features/database/ResultsView.tsx

@@ -665,6 +665,7 @@ export function ResultsView() {
   return (
     <div className={styles.view}>
       <Tabs
+        className={styles.resultTabs}
         variant="compact"
         aria-label="Results"
         activeId={tab ? String(tab.id) : String(OUTPUT_TAB)}