From 558ee395dc9e0ea2ccac95d8494b7495b0cbcaf5 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Sun, 8 Nov 2026 16:17:47 +0800
Subject: [PATCH] fix(templates): keep postfix descriptions inside their rows
 (#2116)

---
 e2e/postfixRowLayout.spec.ts                  | 28 +++++++++++++++++++
 .../templates/settings/LiveTemplatesPage.tsx  |  4 ++-
 .../templates/settings/PostfixPage.tsx        |  4 ++-
 .../templates/settings/Settings.module.css    |  2 ++
 4 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 e2e/postfixRowLayout.spec.ts

diff --git a/e2e/postfixRowLayout.spec.ts b/e2e/postfixRowLayout.spec.ts
new file mode 100644
index 000000000..97efab0a4
--- /dev/null
+++ b/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);
+    }
+  }
+});
diff --git a/src/features/templates/settings/LiveTemplatesPage.tsx b/src/features/templates/settings/LiveTemplatesPage.tsx
index 433960651..62a763a63 100644
--- a/src/features/templates/settings/LiveTemplatesPage.tsx
+++ b/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>
diff --git a/src/features/templates/settings/PostfixPage.tsx b/src/features/templates/settings/PostfixPage.tsx
index e333da135..6b2bec52a 100644
--- a/src/features/templates/settings/PostfixPage.tsx
+++ b/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>
diff --git a/src/features/templates/settings/Settings.module.css b/src/features/templates/settings/Settings.module.css
index 662c046b9..9146bfaea 100644
--- a/src/features/templates/settings/Settings.module.css
+++ b/src/features/templates/settings/Settings.module.css
@@ -81,6 +81,8 @@
   color: var(--fg-emphasis);
 }
 .itemDetail {
+  min-width: 0;
+  white-space: nowrap;
   color: var(--fg-subtle);
   overflow: hidden;
   text-overflow: ellipsis;