mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 14:00:37 +00:00
💄 Clip the limits dialog to its panel and scroll the sections
This commit is contained in:
parent
d4b0944589
commit
e9833fdb55
@ -349,7 +349,7 @@
|
||||
(st/emit! (dwb/fetch-branching-limits)))
|
||||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)}
|
||||
[:div {:class (stl/css :modal-container :limits-container)}
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
[:div {:class (stl/css :modal-header-icon)}
|
||||
[:> i/icon* {:icon-id i/git-branch}]]
|
||||
|
||||
@ -1529,12 +1529,18 @@
|
||||
border-block-start: 1px solid var(--color-background-quaternary);
|
||||
}
|
||||
|
||||
// The limits dialog is the only long modal here. `%modal-container-base` is
|
||||
// a flex column that does not clip, so the content div has to own the
|
||||
// scrolling: cap it against the viewport and let it shrink inside the flex
|
||||
// parent (`min-height: 0`), otherwise the sections spill past the container.
|
||||
// The limits dialog is the only long modal here, and `%modal-container-base`
|
||||
// caps its height without clipping, so a long list spills past the panel.
|
||||
// Make this one container a bounded flex column and give the scrolling to
|
||||
// the content, which needs `min-height: 0` to be allowed to shrink.
|
||||
.limits-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(80vh, 42rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.limits-content {
|
||||
max-height: min(60vh, 32rem);
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user