From 481d28cced4e1807681928bcc5718a2a95d1d338 Mon Sep 17 00:00:00 2001
From: John Factotum <50942278+johnfactotum@users.noreply.github.com>
Date: Fri, 2 Jun 2023 04:45:34 +0800
Subject: [PATCH] Clamp divisor

Although the max width is min-inline-size * max-column-count, sometimes
the actual width apparently doesn't match that exactly.
---
 paginator.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/paginator.js b/paginator.js
index 41e1597..8854b3b 100644
--- a/paginator.js
+++ b/paginator.js
@@ -533,6 +533,7 @@ export class Paginator extends HTMLElement {
 
         const style = getComputedStyle(this)
         const maxInlineSize = parseFloat(style.getPropertyValue('--_max-inline-size'))
+        const maxColumnCount = parseInt(style.getPropertyValue('--_max-column-count'))
         const margin = parseFloat(style.getPropertyValue('--_margin'))
         this.#margin = margin
 
@@ -571,7 +572,7 @@ export class Paginator extends HTMLElement {
             return { flow, margin, gap, columnWidth }
         }
 
-        const divisor = Math.ceil(size / maxInlineSize)
+        const divisor = Math.min(maxColumnCount, Math.ceil(size / maxInlineSize))
         const columnWidth = (size / divisor) - gap
         this.setAttribute('dir', rtl ? 'rtl' : 'ltr')