From ddeed31488c78a6e6afc0475257fcb33dbbefd6b Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 12 Feb 2025 21:18:36 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20alignement=20du=20filtre=20=C3=A0=20droi?=
 =?UTF-8?q?te=20sur=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/library/PaginatedSeriesGrid.tsx | 6 +++---
 src/components/series/PaginatedBookGrid.tsx    | 6 +++---
 tailwind.config.ts                             | 5 ++++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/library/PaginatedSeriesGrid.tsx b/src/components/library/PaginatedSeriesGrid.tsx
index 389773f..96e8bd0 100644
--- a/src/components/library/PaginatedSeriesGrid.tsx
+++ b/src/components/library/PaginatedSeriesGrid.tsx
@@ -69,8 +69,8 @@ export function PaginatedSeriesGrid({
 
   return (
     <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">
           {totalElements > 0 ? (
             <>
               Affichage des séries <span className="font-medium">{startIndex}</span> à{" "}
@@ -83,7 +83,7 @@ export function PaginatedSeriesGrid({
         </p>
         <button
           onClick={handleUnreadFilter}
-          className="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground"
+          className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
         >
           <Filter className="h-4 w-4" />
           {showOnlyUnread ? "Afficher tout" : "À lire"}
diff --git a/src/components/series/PaginatedBookGrid.tsx b/src/components/series/PaginatedBookGrid.tsx
index ecbba8a..d5ab68d 100644
--- a/src/components/series/PaginatedBookGrid.tsx
+++ b/src/components/series/PaginatedBookGrid.tsx
@@ -82,8 +82,8 @@ export function PaginatedBookGrid({
 
   return (
     <div className="space-y-8">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">
           {totalElements > 0 ? (
             <>
               Affichage des tomes <span className="font-medium">{startIndex}</span> à{" "}
@@ -96,7 +96,7 @@ export function PaginatedBookGrid({
         </p>
         <button
           onClick={handleUnreadFilter}
-          className="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground"
+          className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
         >
           <Filter className="h-4 w-4" />
           {showOnlyUnread ? "Afficher tout" : "À lire"}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 41668a3..18d2741 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,7 +12,10 @@ const config = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: {
+        DEFAULT: "1rem",
+        sm: "2rem",
+      },
       screens: {
         "2xl": "1400px",
       },