From 568a668e9f849965ebd93e6bb84b9471a3340016 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Tue, 17 Feb 2026 12:42:55 +0200 Subject: [PATCH] ui/pager: improve layout --- apps/client/src/widgets/collections/Pagination.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css index 5ab78325b4..bb1ed927c4 100644 --- a/apps/client/src/widgets/collections/Pagination.css +++ b/apps/client/src/widgets/collections/Pagination.css @@ -1,5 +1,6 @@ :where(.note-list-pager) { --note-list-pager-page-button-width: 40px; + --note-list-pager-page-button-gap: 3px; --note-list-pager-ellipsis-width: 20px; --note-list-pager-current-page-button-background-color: var(--active-item-background-color); @@ -26,12 +27,15 @@ display: flex; align-items: baseline; justify-content: space-around; - gap: 2px; + gap: var(--note-list-pager-page-button-gap); &.note-list-pager-ellipsis-present { /* Prevent the prev/next buttons from shifting when ellipses appear or disappear */ + --_gap-max-width: calc((var(--note-list-pager-page-button-count) + 2) * var(--note-list-pager-page-button-gap)); + min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width) - + (var(--note-list-pager-ellipsis-width) * 2)); + + (var(--note-list-pager-ellipsis-width) * 2) + + var(--_gap-max-width)); } .note-list-pager-page-button { @@ -50,7 +54,6 @@ .note-list-pager-ellipsis { display: inline-block; width: var(--note-list-pager-ellipsis-width); - gap: 0; text-align: center; opacity: .5; }