feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages

This commit is contained in:
Julien Froidefond
2025-12-01 08:34:28 +01:00
parent 86236aeb04
commit b3b25412ad
19 changed files with 731 additions and 349 deletions

View File

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