feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages
This commit is contained in:
@@ -28,24 +28,24 @@ export function RulesSearchBar({
|
||||
onFilterMinCountChange,
|
||||
}: RulesSearchBarProps) {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-6">
|
||||
<div className="flex flex-col gap-2 md:gap-3 mb-4 md:mb-6">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 md:h-4 md:w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Rechercher dans les descriptions..."
|
||||
placeholder="Rechercher..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
className="pl-10"
|
||||
className="pl-9 md:pl-10 text-sm md:text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-2 md:gap-3 flex-wrap">
|
||||
<Select
|
||||
value={sortBy}
|
||||
onValueChange={(v) => onSortChange(v as "count" | "amount" | "name")}
|
||||
>
|
||||
<SelectTrigger className="w-44">
|
||||
<ArrowUpDown className="h-4 w-4 mr-2" />
|
||||
<SelectTrigger className="w-full md:w-44 text-sm">
|
||||
<ArrowUpDown className="h-3.5 w-3.5 md:h-4 md:w-4 mr-2" />
|
||||
<SelectValue placeholder="Trier par" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -59,8 +59,8 @@ export function RulesSearchBar({
|
||||
value={filterMinCount.toString()}
|
||||
onValueChange={(v) => onFilterMinCountChange(parseInt(v))}
|
||||
>
|
||||
<SelectTrigger className="w-36">
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
<SelectTrigger className="w-full md:w-36 text-sm">
|
||||
<Filter className="h-3.5 w-3.5 md:h-4 md:w-4 mr-2" />
|
||||
<SelectValue placeholder="Minimum" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
Reference in New Issue
Block a user