From 6f0881ab8a63c4e7a00e42aeb15045bce41b459e Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:39:33 +0200
Subject: [PATCH] ui/pager: improve layout

---
 .../src/widgets/collections/Pagination.css       | 16 ++++++++++++++--
 .../src/widgets/collections/Pagination.tsx       |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
index e51faca6e4..bccfbcb5b0 100644
--- a/apps/client/src/widgets/collections/Pagination.css
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -1,11 +1,23 @@
+:where(.note-list-pager) {
+    --note-list-pager-page-button-width: 40px;
+    --note-list-pager-ellipsis-width: 20px;
+}
+
 .note-list-pager {
     display: flex;
     align-items: center;
     font-size: .8rem;
 
     .note-list-pager-page-button-container {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-around;
+        /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
+        min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+                       + (var(--note-list-pager-ellipsis-width) * 2));
+
         .note-list-pager-page-button {
-            min-width: 40px;
+            min-width: var(--note-list-pager-page-button-width);
             padding-inline: 0;
 
             &.note-list-pager-page-button-current {
@@ -17,7 +29,7 @@
 
         .note-list-pager-ellipsis {
             display: inline-block;
-            width: 20px;
+            width: var(--note-list-pager-ellipsis-width);
             text-align: center;
             opacity: .5;
         }
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index 8a20a47352..59c9f29961 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -68,7 +68,8 @@ function PageButtons(props: PageButtonsProps) {
     const rightStart = props.pageCount - rightLength + 1;
     middleStart = Math.min(middleStart, rightStart - middleLength);
 
-    return <div class="note-list-pager-page-button-container">
+    return <div class="note-list-pager-page-button-container"
+                style={{"--note-list-pager-page-button-count": leftLength + middleLength + rightLength}}>
         {[
             ...createSegment(leftStart, leftLength, props.page, props.setPage, false),
             ...createSegment(middleStart, middleLength, props.page, props.setPage, (middleStart - leftLength > 1)),