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

@@ -238,10 +238,14 @@ export default function RulesPage() {
<PageHeader
title="Règles de catégorisation"
description={
<span className="flex items-center gap-2">
{transactionGroups.length} groupe
{transactionGroups.length > 1 ? "s" : ""} de transactions similaires
<Badge variant="secondary">{uncategorizedCount} non catégorisées</Badge>
<span className="flex items-center gap-2 flex-wrap">
<span className="text-xs md:text-base">
{transactionGroups.length} groupe
{transactionGroups.length > 1 ? "s" : ""} de transactions similaires
</span>
<Badge variant="secondary" className="text-[10px] md:text-xs">
{uncategorizedCount} non catégorisées
</Badge>
</span>
}
actions={
@@ -272,14 +276,14 @@ export default function RulesPage() {
/>
{transactionGroups.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-center">
<Sparkles className="h-12 w-12 text-muted-foreground mb-4" />
<h3 className="text-lg font-medium text-foreground mb-2">
<div className="flex flex-col items-center justify-center py-12 md:py-16 text-center px-4">
<Sparkles className="h-8 w-8 md:h-12 md:w-12 text-muted-foreground mb-3 md:mb-4" />
<h3 className="text-base md:text-lg font-medium text-foreground mb-2">
{uncategorizedCount === 0
? "Toutes les transactions sont catégorisées !"
: "Aucun groupe trouvé"}
</h3>
<p className="text-sm text-muted-foreground max-w-md">
<p className="text-xs md:text-sm text-muted-foreground max-w-md">
{uncategorizedCount === 0
? "Continuez à importer des transactions pour voir les suggestions de règles."
: filterMinCount > 1
@@ -288,7 +292,7 @@ export default function RulesPage() {
</p>
</div>
) : (
<div className="space-y-3">
<div className="space-y-2 md:space-y-3">
{transactionGroups.map((group) => (
<RuleGroupCard
key={group.key}