From 016fe1cff6b3c5002acf31186345c53d990df3fd Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:08:06 +0800
Subject: [PATCH] fix(skills,autopilots): toolbar small-screen treatment
 follows issues header

Below md: the search box (and its result count) disappear entirely,
and the filter/display controls collapse to square icon-only buttons
(labels and the clear-X are md+), matching the issues header's
responsive pattern.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/autopilot-list-toolbar.tsx     | 14 +++++++------
 .../skills/components/skill-list-toolbar.tsx  | 20 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/views/autopilots/components/autopilot-list-toolbar.tsx b/packages/views/autopilots/components/autopilot-list-toolbar.tsx
index d4a29d439..9881909f0 100644
--- a/packages/views/autopilots/components/autopilot-list-toolbar.tsx
+++ b/packages/views/autopilots/components/autopilot-list-toolbar.tsx
@@ -258,7 +258,9 @@ export function AutopilotListToolbar({
           </DropdownMenuContent>
         </DropdownMenu>
 
-        <div className="relative hidden sm:block">
+        {/* Below md the search and count disappear entirely (issues
+            header's small-screen treatment). */}
+        <div className="relative hidden md:block">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
@@ -270,7 +272,7 @@ export function AutopilotListToolbar({
         {(hasActiveFilters || search.trim().length > 0) && (
           <span
             title={t(($) => $.toolbar.result_count_title)}
-            className="shrink-0 text-xs tabular-nums text-muted-foreground"
+            className="hidden shrink-0 text-xs tabular-nums text-muted-foreground md:inline"
           >
             {visibleCount} / {allRows.length}
           </span>
@@ -287,8 +289,8 @@ export function AutopilotListToolbar({
                 size="sm"
                 className={
                   hasActiveFilters
-                    ? "h-8 gap-1 bg-brand px-2.5 text-white hover:bg-brand/90"
-                    : "h-8 gap-1 px-2.5 text-muted-foreground"
+                    ? "h-8 w-8 gap-1 bg-brand px-0 text-white hover:bg-brand/90 md:w-auto md:px-2.5"
+                    : "h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
                 }
               >
                 <Filter className="size-3.5" />
@@ -313,7 +315,7 @@ export function AutopilotListToolbar({
                     role="button"
                     tabIndex={-1}
                     aria-label={t(($) => $.toolbar.clear_filters)}
-                    className="-mr-1 ml-0.5 rounded-sm p-0.5 hover:bg-white/20"
+                    className="-mr-1 ml-0.5 hidden rounded-sm p-0.5 hover:bg-white/20 md:inline-flex"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -474,7 +476,7 @@ export function AutopilotListToolbar({
                     <Button
                       variant="outline"
                       size="sm"
-                      className="h-8 gap-1 px-2.5 text-muted-foreground"
+                      className="h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
                     >
                       {sortDirection === "asc" ? (
                         <ArrowUp className="size-3.5" />
diff --git a/packages/views/skills/components/skill-list-toolbar.tsx b/packages/views/skills/components/skill-list-toolbar.tsx
index 0aa875124..c0a1b3459 100644
--- a/packages/views/skills/components/skill-list-toolbar.tsx
+++ b/packages/views/skills/components/skill-list-toolbar.tsx
@@ -179,21 +179,23 @@ export function SkillListToolbar({
     <div className="flex h-12 shrink-0 items-center justify-between gap-2 px-5">
       {/* Left: name search + result count. The count only appears while
           search/filters narrow the list — in the idle state it would just
-          duplicate the total already shown in the page header. */}
-      <div className="flex w-full items-center gap-2 sm:w-auto">
-        <div className="relative w-full sm:w-auto">
+          duplicate the total already shown in the page header. Below md the
+          search (and its count) disappear entirely, following the issues
+          header's small-screen treatment. */}
+      <div className="flex min-w-0 items-center gap-2">
+        <div className="relative hidden md:block">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
             onChange={(e) => onSearchChange(e.target.value)}
             placeholder={t(($) => $.page.search_placeholder)}
-            className="h-8 w-full pl-8 text-sm sm:w-64"
+            className="h-8 w-64 pl-8 text-sm"
           />
         </div>
         {(hasActiveFilters || search.trim().length > 0) && (
           <span
             title={t(($) => $.toolbar.result_count_title)}
-            className="shrink-0 text-xs tabular-nums text-muted-foreground"
+            className="hidden shrink-0 text-xs tabular-nums text-muted-foreground md:inline"
           >
             {visibleCount} / {allRows.length}
           </span>
@@ -210,8 +212,8 @@ export function SkillListToolbar({
                 size="sm"
                 className={
                   hasActiveFilters
-                    ? "h-8 gap-1 bg-brand px-2.5 text-white hover:bg-brand/90"
-                    : "h-8 gap-1 px-2.5 text-muted-foreground"
+                    ? "h-8 w-8 gap-1 bg-brand px-0 text-white hover:bg-brand/90 md:w-auto md:px-2.5"
+                    : "h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
                 }
               >
                 <Filter className="size-3.5" />
@@ -236,7 +238,7 @@ export function SkillListToolbar({
                     role="button"
                     tabIndex={-1}
                     aria-label={t(($) => $.toolbar.clear_filters)}
-                    className="-mr-1 ml-0.5 rounded-sm p-0.5 hover:bg-white/20"
+                    className="-mr-1 ml-0.5 hidden rounded-sm p-0.5 hover:bg-white/20 md:inline-flex"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -395,7 +397,7 @@ export function SkillListToolbar({
                     <Button
                       variant="outline"
                       size="sm"
-                      className="h-8 gap-1 px-2.5 text-muted-foreground"
+                      className="h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
                     >
                       {sortDirection === "asc" ? (
                         <ArrowUp className="size-3.5" />