fix(templates): keep postfix descriptions inside their rows

e2e/postfixRowLayout.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "./fixtures";
+
+test("postfix template descriptions remain inside their rows", async ({ workbench: page }) => {
+  await page.keyboard.press("Meta+,");
+  await expect(page.getByRole("dialog", { name: "Settings", exact: true })).toBeVisible();
+  await page.evaluate(async () => {
+    const path = "/src/features/settings/model/staging.ts";
+    (await import(/* @vite-ignore */ path)).selectPage("editor.general.postfixCompletion");
+  });
+  const rows = page.getByRole("list", { name: "Postfix templates" }).getByRole("listitem");
+  await expect(rows.first()).toBeVisible();
+  for (const language of ["JavaScript / TypeScript", "Rust", "Python", "Go", "Java", "Kotlin"]) {
+    await page.getByRole("tab", { name: language, exact: true }).click();
+    for (const width of [1000, 640, 520]) {
+      await page.setViewportSize({ width, height: 760 });
+      const fits = await rows.evaluateAll((rows) =>
+        rows.every((row) => {
+          const bounds = row.getBoundingClientRect();
+          const detail = row.lastElementChild!;
+          const range = document.createRange();
+          range.selectNodeContents(detail);
+          return [...range.getClientRects()].every((r) => r.top >= bounds.top - 1 && r.bottom <= bounds.bottom + 1);
+        }),
+      );
+      expect(fits).toBe(true);
+    }
+  }
+});

src/features/github/diff/index.ts

@@ -3,11 +3,14 @@
  * (opened by `openPullRequestFileDiff` / the details panel's commit diffs, context
  * `PULL_REQUEST_DIFF`) get their review threads as inlays, the gutter "+" with single- and
  * multi-line comments, Start Review / Add Single Comment, the review toolbar and the viewed
- * toggle, through the vcs diff viewer provider point. The editor actions also serve review mode's editors.
+ * toggle, through the vcs diff viewer provider point. Also registers the editor actions and
+ * Settings › Version Control › GitHub. The editor actions also serve review mode's editors.
  */
 import { registerDiffViewerProvider } from "@/features/vcs/diffViewerProviders";
 import { registerActions } from "@/platform/actions";
 import { getContext } from "@/platform/context";
+import { lazyComponent } from "@/ui";
+import { registerSettingsPage } from "@/workbench/contributions";
 import { useGhRepository } from "../data/repository";
 import { activeReviewEditor } from "../reviewMode/editor";
 import { clearNewComments } from "./newComments";
@@ -79,6 +82,13 @@ export function activateReviewDiff(): () => void {
         run: () => reviewTarget()?.refresh(),
       },
     ]),
+    registerSettingsPage({
+      id: "vcs.github",
+      title: "GitHub",
+      order: 9,
+      keywords: ["pull request", "viewed", "review"],
+      component: lazyComponent(() => import("./GithubSettingsPage").then((m) => m.GithubSettingsPage)),
+    }),
     useGhRepository.subscribe((s, prev) => {
       const a = s.connection?.coordinates;
       const b = prev.connection?.coordinates;

src/features/github/diff/settings.ts

@@ -46,10 +46,6 @@ function load(): ReviewDiffSettings {
 
 export const useReviewDiffSettings = create<ReviewDiffSettings>(load);
 
-globalThis.addEventListener?.("storage", (event: StorageEvent) => {
-  if (event.key === KEY || event.key === null) useReviewDiffSettings.setState(load(), true);
-});
-
 export function setReviewDiffSettings(patch: Partial<ReviewDiffSettings>) {
   useReviewDiffSettings.setState(patch);
   try {

src/features/github/index.ts

@@ -22,9 +22,6 @@ import {
 import { useGithubShell } from "./shell";
 import { githubHandler, handlerContextKey } from "./toolwindow/handlers";
 import { GithubDialogHost } from "./ui/dialogs";
-import { activateSettingsPages } from "./settingsPages";
-
-export { activateSettingsPages } from "./settingsPages";
 
 const WINDOW = "pullRequests";
 const TIMELINE_KIND = "github.timeline";
@@ -258,7 +255,6 @@ export function activate(): () => void {
   active = true;
   setContext("githubPrTab", "list");
   const disposers = [
-    activateSettingsPages(),
     registerCloneSource({
       id: "github",
       label: "GitHub",

src/features/github/settingsPages.test.tsx

@@ -1,52 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest";
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { useSettingsPages } from "@/workbench/contributions";
-import { activateSettingsPages } from "./settingsPages";
-import { GithubSettingsPage } from "./diff/GithubSettingsPage";
-import { setReviewDiffSettings, useReviewDiffSettings } from "./diff/settings";
-
-const KEY = "openidea.github.reviewDiff.v1";
-
-beforeEach(() => {
-  localStorage.removeItem(KEY);
-  window.dispatchEvent(new StorageEvent("storage", { key: KEY }));
-});
-
-describe("GitHub settings pages", () => {
-  it("registers independently of the pull request runtime", () => {
-    const dispose = activateSettingsPages();
-    expect(useSettingsPages.getState().pages.get("vcs.github")).toMatchObject({ title: "GitHub" });
-    expect(useSettingsPages.getState().pages.get("vcs.github")?.component).toBeDefined();
-    dispose();
-    expect(useSettingsPages.getState().pages.has("vcs.github")).toBe(false);
-  });
-
-  it("updates an open page when another window saves or clears review settings", () => {
-    render(<GithubSettingsPage />);
-    const checkbox = screen.getByRole("checkbox", { name: "Automatically mark opened files as viewed" });
-    expect(checkbox).not.toBeChecked();
-    act(() => {
-      localStorage.setItem(KEY, JSON.stringify({ autoMarkViewed: true, threadsView: "all" }));
-      window.dispatchEvent(new StorageEvent("storage", { key: KEY }));
-    });
-    expect(checkbox).toBeChecked();
-    expect(useReviewDiffSettings.getState().threadsView).toBe("all");
-    act(() => {
-      localStorage.clear();
-      window.dispatchEvent(new StorageEvent("storage", { key: null }));
-    });
-    expect(checkbox).not.toBeChecked();
-    fireEvent.click(checkbox);
-    expect(JSON.parse(localStorage.getItem(KEY)!)).toMatchObject({ autoMarkViewed: true });
-  });
-
-  it("ignores unrelated storage changes and recovers from invalid saved settings", () => {
-    setReviewDiffSettings({ autoMarkViewed: true });
-    localStorage.removeItem(KEY);
-    window.dispatchEvent(new StorageEvent("storage", { key: "other" }));
-    expect(useReviewDiffSettings.getState().autoMarkViewed).toBe(true);
-    localStorage.setItem(KEY, "invalid JSON");
-    window.dispatchEvent(new StorageEvent("storage", { key: KEY }));
-    expect(useReviewDiffSettings.getState().autoMarkViewed).toBe(false);
-  });
-});

src/features/github/settingsPages.ts

@@ -1,12 +0,0 @@
-import { lazyComponent } from "@/ui";
-import { registerSettingsPage } from "@/workbench/contributions";
-
-export function activateSettingsPages(): () => void {
-  return registerSettingsPage({
-    id: "vcs.github",
-    title: "GitHub",
-    order: 9,
-    keywords: ["pull request", "viewed", "review"],
-    component: lazyComponent(() => import("./diff/GithubSettingsPage").then((m) => m.GithubSettingsPage)),
-  });
-}

src/features/index.ts

@@ -43,7 +43,7 @@ import { activate as notebook } from "./notebook";
 import { activate as web } from "./web";
 import { activate as analysis } from "./analysis";
 import { activate as services } from "./services";
-import { activate as github, activateSettingsPages as githubPages } from "./github";
+import { activate as github } from "./github";
 import { activate as httpClient } from "./http-client";
 import { activate as database } from "./database";
 import { activate as graphql } from "./graphql";
@@ -166,7 +166,6 @@ export function activateSettingsWindowFeatures(parent: string): () => void {
     ["agents", agentsPages],
     ["vim", vimPages],
     ["vcs", vcsPages],
-    ["github", githubPages],
   ];
   return activateAll("settings pages", pages);
 }

src/features/templates/settings/LiveTemplatesPage.tsx

@@ -112,7 +112,9 @@ export function LiveTemplatesPage() {
                     <span className={clsx(styles.itemLabel, isModifiedBuiltin(t.id) && styles.modified)}>
                       {t.abbrev}
                     </span>
-                    <span className={styles.itemDetail}>{t.description}</span>
+                    <span className={styles.itemDetail} title={t.description}>
+                      {t.description}
+                    </span>
                   </div>
                 ))}
               </div>

src/features/templates/settings/PostfixPage.tsx

@@ -63,7 +63,9 @@ export function PostfixPage() {
               aria-label={tx`Enable .${t.key}`}
             />
             <span className={styles.mono}>.{t.key}</span>
-            <span className={styles.itemDetail}>{t.description}</span>
+            <span className={styles.itemDetail} title={t.description}>
+              {t.description}
+            </span>
           </div>
         ))}
       </div>

src/features/templates/settings/Settings.module.css

@@ -80,6 +80,8 @@
   color: var(--fg-emphasis);
 }
 .itemDetail {
+  min-width: 0;
+  white-space: nowrap;
   color: var(--fg-subtle);
   overflow: hidden;
   text-overflow: ellipsis;