Revise pagination styling

Author: HolgerGerhardt

src/uproot/_static/admin.css

@@ -204,12 +204,31 @@ footer a {
    Pagination Styles
    ============================================================================ */
 
+
+.pagination {
+    dflex-wrap: wrap;
+}
+
+.pagination > .page-item {
+    max-width: 3.1em;
+    min-width: 2em;
+    width: 12.5%;
+}
+
+.pagination > li:first-child,
+.pagination > li:last-child {
+    flex-shrink: 0;
+    min-width: 1.75em;
+    width: 1.75em;
+}
+
 .pagination .page-item .page-link {
     align-items: center;
     color: var(--bs-uproot);
     display: flex;
     height: 100%;
-    text-align: center;
+    justify-content: center;
+    padding-inline: 0;
 }
 .pagination .page-item.disabled .page-link {
     background-color: unset;

src/uproot/_static/admin.js

@@ -47,6 +47,11 @@ function createElement(tag, className, attrs = {}) {
     return el;
 }
 
+function getPaginationLabel(name) {
+    const [first = "", second = ""] = Array.from(name.trim());
+    return first.toLocaleUpperCase() + second.toLocaleLowerCase();
+}
+
 /**
  * Creates a table row with label and value for d-table layout.
  */
@@ -121,7 +126,7 @@ function renderRooms(rooms, containerId) {
 
     sortedRooms.forEach(room => {
         const col = createElement("div", "mb-4 uproot-pagination-item");
-        col.dataset.paginationLabel = Array.from(room.name.trim())[0]?.toLocaleUpperCase() || "";
+        col.dataset.paginationLabel = getPaginationLabel(room.name);
         const card = createElement("div", "border-uproot callout card");
 
         // Card header
@@ -433,7 +438,7 @@ function renderConfigsAppsCards(data, containerId, groupKey) {
             "align-items-start border-start callout d-flex justify-content-between px-3 py-2 mb-3 uproot-pagination-item " +
             cardBodyClass
         );
-        item.dataset.paginationLabel = Array.from(displayKey.trim())[0]?.toLocaleUpperCase() || "";
+        item.dataset.paginationLabel = getPaginationLabel(displayKey);
 
         const content = createElement("div", "flex-grow-1 overflow-x-auto");
 

src/uproot/_static/uproot.js

@@ -991,7 +991,7 @@ window.uproot = {
 
     paginateBlocks() {
         document.querySelectorAll(".uproot-pagination").forEach((wrapper) => {
-            const itemsPerPage = parseInt(wrapper.dataset.itemsPerPage) || 15;
+            const itemsPerPage = parseInt(wrapper.dataset.itemsPerPage) || 10;
             const items = Array.from(wrapper.querySelectorAll(":scope > .uproot-pagination-item"));
 
             if (items.length <= itemsPerPage) return;
@@ -1074,9 +1074,7 @@ window.uproot = {
                         const a = document.createElement("a");
                         a.className = "page-link";
                         a.href = "#";
-                        const firstLabel = items[(p - 1) * itemsPerPage].dataset.paginationLabel;
-                        const lastLabel = items[Math.min(p * itemsPerPage, items.length) - 1].dataset.paginationLabel;
-                        a.textContent = firstLabel && lastLabel ? `${firstLabel}\u200B\u200A–\u200A\u200B${lastLabel}` : p;
+                        a.textContent = items[(p - 1) * itemsPerPage].dataset.paginationLabel || p;
                         if (isActive) a.setAttribute("aria-current", "page");
                         a.addEventListener("click", (e) => {
                             e.preventDefault();