From 7df1f9c876e72ef1b3181b80b084edbc5b3ba643 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Tejero=20Cantero?= <alvorithm@teje.ro>
Date: Fri, 14 Aug 2026 09:27:57 +0200
Subject: [PATCH] :lipstick: Bound the limits dialog height and group its
 numbers

---
 .../app/main/ui/workspace/sidebar/branches.cljs  | 16 ++++++++++++----
 .../app/main/ui/workspace/sidebar/branches.scss  |  7 +++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/branches.cljs b/frontend/src/app/main/ui/workspace/sidebar/branches.cljs
index ce8a0ded51..20a7feaa07 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/branches.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/branches.cljs
@@ -323,6 +323,14 @@
 ;; numbers are fetched from the backend (`::get-branching-limits`) and never
 ;; restated in the copy: the config the gates read is their one home.
 
+(defn- grouped
+  "A limit as a reader sees it: 50,000 rather than 50000, in the user's own
+  locale, because these numbers are read once and compared to a file size."
+  [n]
+  (if (number? n)
+    (.toLocaleString ^js n)
+    (dm/str n)))
+
 (mf/defc limits-item*
   {::mf/private true}
   [{:keys [text]}]
@@ -353,15 +361,15 @@
                     :aria-label (tr "labels.close")
                     :on-click on-close}]]
 
-      [:div {:class (stl/css :modal-content)}
+      [:div {:class (stl/css :modal-content :limits-content)}
        [:div {:class (stl/css :limits-section)}
         [:h3 {:class (stl/css :limits-section-title)} (tr "workspace.branches.limits.size.title")]
         [:ul {:class (stl/css :limits-list)}
          (if (some? limits)
            [:*
-            [:> limits-item* {:text (tr "workspace.branches.limits.size.shapes" (dm/str (:max-shapes limits)))}]
-            [:> limits-item* {:text (tr "workspace.branches.limits.size.pages" (dm/str (:max-pages limits)))}]
-            [:> limits-item* {:text (tr "workspace.branches.limits.size.changes" (dm/str (:max-oplog-changes limits)))}]]
+            [:> limits-item* {:text (tr "workspace.branches.limits.size.shapes" (grouped (:max-shapes limits)))}]
+            [:> limits-item* {:text (tr "workspace.branches.limits.size.pages" (grouped (:max-pages limits)))}]
+            [:> limits-item* {:text (tr "workspace.branches.limits.size.changes" (grouped (:max-oplog-changes limits)))}]]
            [:> limits-item* {:text (tr "workspace.branches.limits.size.loading")}])]]
 
        [:div {:class (stl/css :limits-section)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/branches.scss b/frontend/src/app/main/ui/workspace/sidebar/branches.scss
index e2cb7c487a..9e7efbaf97 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/branches.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/branches.scss
@@ -1529,6 +1529,13 @@
   border-block-start: 1px solid var(--color-background-quaternary);
 }
 
+// The limits dialog is the only long modal here: bound it to the viewport
+// and let the sections scroll rather than spilling past the container.
+.limits-content {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
 .branches-limits-link {
   @include t.use-typography("body-small");