+ 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. */}
+
+
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"
/>
{(hasActiveFilters || search.trim().length > 0) && (
$.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}
@@ -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"
}
>
@@ -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({