From 72f70485140ae8d4e2caef5ed8413997efa6037a Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 8 Dec 2023 12:14:42 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20make=20Pagination=20respo?=
 =?UTF-8?q?nsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want to adapt the layout of Pagination to take less space when
its container is too small.
---
 .../src/components/Pagination/_index.scss     | 47 +++++++++++++------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Pagination/_index.scss b/packages/react/src/components/Pagination/_index.scss
index ecbe743..f1fd79f 100644
--- a/packages/react/src/components/Pagination/_index.scss
+++ b/packages/react/src/components/Pagination/_index.scss
@@ -1,23 +1,42 @@
+@use "../../utils/responsive" as *;
+
 .c__pagination {
+  display: flex;
+  gap: 2rem;
+
+  &__list {
     display: flex;
-    gap: 2rem;
+    align-items: center;
+    border: 1px var(--c--theme--colors--greyscale-300) solid;
+    border-radius: 2px;
+    padding: var(--c--theme--spacings--st);
+    background: var(--c--theme--colors--greyscale-000);
+  }
+
+  &__goto {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .c__field--default {
+      width: 100px;
+    }
+  }
+}
+
+@include container(md) {
+  .c__pagination {
+    width: 100%;
+    display: block;
 
     &__list {
-        display: flex;
-        align-items: center;
-        border: 1px var(--c--theme--colors--greyscale-300) solid;
-        border-radius: 2px;
-        padding: var(--c--theme--spacings--st);
-        background: var(--c--theme--colors--greyscale-000);
+      justify-content: center;
+      height: 3.5rem;
+      box-sizing: border-box;
     }
 
     &__goto {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-
-        .c__field--default {
-            width: 100px;
-        }
+      display: none;
     }
+  }
 }