From f12312d69b1387c6d2e4ab67cc0f41f20e34a67c Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Mon, 6 Jul 2026 02:24:11 +0100
Subject: [PATCH] fix(ui): align Skills filters (#100526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 杨爱文 <yang.aiwen@xydigit.com>
---
 .../components/form-controls.browser.test.ts  | 33 ++++++++++++++++++-
 ui/src/pages/skills/view.test.ts              |  4 +++
 ui/src/pages/skills/view.ts                   |  3 +-
 ui/src/styles/components.css                  |  5 +++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/form-controls.browser.test.ts b/ui/src/components/form-controls.browser.test.ts
index 460d5e59fcb1..ed1710aeef1f 100644
--- a/ui/src/components/form-controls.browser.test.ts
+++ b/ui/src/components/form-controls.browser.test.ts
@@ -31,9 +31,11 @@ function readUiCss(): string {
 function controlsHtml() {
   return `
     <main>
-      <label class="field"><input value="field input" /></label>
+      <label class="field"><input type="text" value="field input" /></label>
       <label class="field"><textarea>field textarea</textarea></label>
       <label class="field"><select><option>field select</option></select></label>
+      <label class="field checkbox"><input type="checkbox" /><span>field checkbox</span></label>
+      <label class="field checkbox"><input type="radio" /><span>field radio</span></label>
       <input class="config-search__input" value="search" />
       <input class="settings-theme-import__input" value="theme" />
       <label class="config-raw-field"><textarea>raw config</textarea></label>
@@ -155,4 +157,33 @@ describeBrowserLayout("touch-primary form controls", () => {
       await closeMobileFixture(fixture);
     }
   });
+
+  it("aligns text controls without stretching checkbox and radio inputs", async () => {
+    const fixture = await openMobileFixture();
+    const { page } = fixture;
+    try {
+      const dimensions = await page.evaluate(() => {
+        const height = (selector: string) => {
+          const node = document.querySelector(selector);
+          if (!(node instanceof HTMLElement)) {
+            throw new Error(`Missing control ${selector}`);
+          }
+          return node.getBoundingClientRect().height;
+        };
+        return {
+          checkbox: height('.field input[type="checkbox"]'),
+          radio: height('.field input[type="radio"]'),
+          select: height(".field select"),
+          text: height('.field input[type="text"]'),
+        };
+      });
+
+      expect(dimensions.text).toBe(38);
+      expect(dimensions.select).toBe(38);
+      expect(dimensions.checkbox).toBeLessThan(38);
+      expect(dimensions.radio).toBeLessThan(38);
+    } finally {
+      await closeMobileFixture(fixture);
+    }
+  });
 });
diff --git a/ui/src/pages/skills/view.test.ts b/ui/src/pages/skills/view.test.ts
index f1d9891107b3..9cd307880dc3 100644
--- a/ui/src/pages/skills/view.test.ts
+++ b/ui/src/pages/skills/view.test.ts
@@ -137,7 +137,11 @@ describe("renderSkills", () => {
     await Promise.resolve();
 
     const selector = container.querySelector<HTMLSelectElement>('select[name="skills-agent"]');
+    const filter = container.querySelector<HTMLInputElement>('input[name="skills-filter"]');
     expect(selector).toBeInstanceOf(HTMLSelectElement);
+    expect(filter).toBeInstanceOf(HTMLInputElement);
+    expect(normalizeText(selector!.closest("label")!)).toContain("Agent");
+    expect(normalizeText(filter!.closest("label")!)).toContain("Search");
     expect(selector?.value).toBe("research");
     expect(Array.from(selector!.options).map((option) => option.textContent?.trim())).toEqual([
       "Main (default)",
diff --git a/ui/src/pages/skills/view.ts b/ui/src/pages/skills/view.ts
index d4463909bf1d..5c0a981b1b37 100644
--- a/ui/src/pages/skills/view.ts
+++ b/ui/src/pages/skills/view.ts
@@ -263,7 +263,7 @@ export function renderSkills(props: SkillsProps) {
         ${agents.length > 0
           ? html`
               <label class="field" style="min-width: 180px;">
-                <span>${t("common.filters.agent")}</span>
+                <span>${t("usage.filters.agent")}</span>
                 <select
                   name="skills-agent"
                   .value=${selectedAgentId}
@@ -283,6 +283,7 @@ export function renderSkills(props: SkillsProps) {
             `
           : nothing}
         <label class="field" style="flex: 1; min-width: 180px;">
+          <span>${t("common.search")}</span>
           <input
             .value=${props.filter}
             @input=${(e: Event) => props.onFilterChange((e.target as HTMLInputElement).value)}
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index ad0f1975a276..316536af3bb6 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -940,6 +940,11 @@
     box-shadow var(--duration-fast) ease;
 }
 
+.field input:not([type="checkbox"]):not([type="radio"]),
+.field select {
+  height: 38px;
+}
+
 @media (hover: none) and (pointer: coarse) {
   .field input,
   .field textarea,