From 7964bd3be4c06674d42e3460fd2a24af69a37bca Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 21:31:03 +0200
Subject: [PATCH] ui/pager: make responsive

---
 .../src/widgets/collections/Pagination.css    | 29 +++++++++++++-
 .../src/widgets/collections/Pagination.tsx    | 39 +++++++++++--------
 2 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index 2fccb8b1ba..fcb5ef6391 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -3,6 +3,13 @@
     --note-list-pager-ellipsis-width: 20px;
 }
 
+.note-list-pager-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    container: note-list-pager / inline-size;
+}
+
 .note-list-pager {
     display: flex;
     align-items: center;
@@ -35,9 +42,29 @@
         }
     }
 
+    .note-list-pager-narrow-counter {
+        display: none;
+        min-width: 60px;
+        text-align: center;
+        white-space: nowrap;
+    }
+
     .note-list-pager-total-count {
         margin-inline-start: 8px;
         opacity: .75;
         white-space: nowrap;
     }
-}
\ No newline at end of file
+
+    @container note-list-pager (max-width: 550px) {
+        .note-list-pager-page-button-container,
+        .note-list-pager-total-count {
+            background: red;
+            display: none;
+        }
+
+        .note-list-pager-narrow-counter {
+            display: block;
+        }
+    }
+}
+
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index d9b7cec697..99e5ae5d81 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -22,25 +22,30 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     if (pageCount < 2) return;
 
     return (
-        <div class="note-list-pager">
-            <ActionButton
-                icon="bx bx-chevron-left"
-                disabled={(page === 1)}
-                text={t("pagination.prev_page")}
-                onClick={() => {setPage(page - 1)}}
-            />
+        <div class="note-list-pager-container">
+            <div class="note-list-pager">
+                <ActionButton
+                    icon="bx bx-chevron-left"
+                    disabled={(page === 1)}
+                    text={t("pagination.prev_page")}
+                    onClick={() => {setPage(page - 1)}}
+                />
 
-            <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
-                        
-            <ActionButton
-                icon="bx bx-chevron-right"
-                disabled={(page === pageCount)}
-                text={t("pagination.next_page")}
-                onClick={() => {setPage(page + 1)}}
-            />
+                <PageButtons page={page} setPage={setPage} pageCount={pageCount} />
+                <div className="note-list-pager-narrow-counter">
+                    <strong>{page}</strong> / <strong>{pageCount}</strong>
+                </div>
+                            
+                <ActionButton
+                    icon="bx bx-chevron-right"
+                    disabled={(page === pageCount)}
+                    text={t("pagination.next_page")}
+                    onClick={() => {setPage(page + 1)}}
+                />
 
-            <div className="note-list-pager-total-count">
-                {t("pagination.total_notes", { count: totalNotes })}
+                <div className="note-list-pager-total-count">
+                    {t("pagination.total_notes", { count: totalNotes })}
+                </div>
             </div>
         </div>
     )