From aeb9c9f9fb7055c5a06951ad542566f82f764fab Mon Sep 17 00:00:00 2001 From: fs Date: Sun, 5 Apr 2026 18:11:23 +0200 Subject: [PATCH] feat: replace pagination text labels with chevron icons in Grid.js tables Use CSS font-size:0 to visually hide prev/next button text and render Bootstrap Icons chevrons via ::before pseudo-elements. Button text stays in the DOM for screen readers. Applies globally to all Grid.js tables. Co-Authored-By: Claude Opus 4.6 (1M context) --- web/css/vendor-overrides/gridjs.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/web/css/vendor-overrides/gridjs.css b/web/css/vendor-overrides/gridjs.css index e72e2cf..bfcf95f 100644 --- a/web/css/vendor-overrides/gridjs.css +++ b/web/css/vendor-overrides/gridjs.css @@ -306,6 +306,27 @@ .gridjs-pagination .gridjs-pages button:last-child { border-right: none; } + + .gridjs-pagination .gridjs-pages button:first-child, + .gridjs-pagination .gridjs-pages button:last-child { + font-size: 0; + line-height: 1; + padding: 2px 8px; + } + + .gridjs-pagination .gridjs-pages button:first-child::before, + .gridjs-pagination .gridjs-pages button:last-child::before { + font-family: "Bootstrap-icons"; + font-size: var(--text-sm, 0.875rem); + } + + .gridjs-pagination .gridjs-pages button:first-child::before { + content: "\F284"; + } + + .gridjs-pagination .gridjs-pages button:last-child::before { + content: "\F285"; + } button.gridjs-sort { background-color: transparent; background-position-x: center;