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

@@ -57,24 +57,25 @@ export function CategoryPieChart({
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle>{title}</CardTitle>
<div className="flex gap-2">
<CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0 pb-2">
<CardTitle className="text-sm md:text-base">{title}</CardTitle>
<div className="flex flex-col md:flex-row gap-2 w-full md:w-auto">
{hasParentData && (
<Button
variant={groupByParent ? "default" : "ghost"}
size="sm"
onClick={() => setGroupByParent(!groupByParent)}
title={groupByParent ? "Afficher toutes les catégories" : "Regrouper par catégories parentes"}
className="w-full md:w-auto text-xs md:text-sm"
>
{groupByParent ? (
<>
<List className="w-4 h-4 mr-1" />
<List className="w-3 h-3 md:w-4 md:h-4 mr-1" />
Par catégorie
</>
) : (
<>
<Layers className="w-4 h-4 mr-1" />
<Layers className="w-3 h-3 md:w-4 md:h-4 mr-1" />
Par parent
</>
)}
@@ -85,15 +86,16 @@ export function CategoryPieChart({
variant="ghost"
size="sm"
onClick={() => setIsExpanded(!isExpanded)}
className="w-full md:w-auto text-xs md:text-sm"
>
{isExpanded ? (
<>
<ChevronUp className="w-4 h-4 mr-1" />
<ChevronUp className="w-3 h-3 md:w-4 md:h-4 mr-1" />
Réduire
</>
) : (
<>
<ChevronDown className="w-4 h-4 mr-1" />
<ChevronDown className="w-3 h-3 md:w-4 md:h-4 mr-1" />
Voir tout ({baseData.length})
</>
)}