💄 Bound the limits dialog height and group its numbers

This commit is contained in:
Álvaro Tejero Cantero 2026-08-14 09:27:57 +02:00
parent 05d123aa62
commit 7df1f9c876
No known key found for this signature in database
2 changed files with 19 additions and 4 deletions

View File

@ -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)}

View File

@ -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");