feat: enhance responsive design and layout consistency across various components, including dashboard, statistics, and rules pages
This commit is contained in:
@@ -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})
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user