highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-06-17 03:38:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(skills,autopilots): toolbar small-screen treatment follows issues header

Browse Source 
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>
This commit is contained in:
Naiyuan Qing
2026-06-12 16:08:06 +08:00
parent f32f808ead
commit 016fe1cff6
2 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/views/autopilots/components/autopilot-list-toolbar.tsx
View File

@@ -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" />

20
packages/views/skills/components/skill-list-toolbar.tsx
View File

@@ -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" />