fix(ui): align Skills filters (#100526)

steipete · evan-YM · web-flow · commit f12312d69b13 · 2026-07-06T02:24:11.000+01:00
Co-authored-by: 杨爱文 &lt;yang.aiwen@xydigit.com&gt;
diff --git 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
@@ -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
@@ -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
@@ -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,
