diff --git a/packages/atlas-core/CHANGELOG.md b/packages/atlas-core/CHANGELOG.md index afd56780b..84e59233f 100644 --- a/packages/atlas-core/CHANGELOG.md +++ b/packages/atlas-core/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Fixed + +- We fixed an issue with scroll container regions not scrolling correctly in some cases. + ## [4.3.2] Atlas Core - 2026-1-20 ### Fixed diff --git a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss index 97b24d34d..09a860ee6 100644 --- a/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss +++ b/packages/atlas/src/themesource/atlas_core/web/core/widgets/_scroll-container-react.scss @@ -43,44 +43,37 @@ } .mx-scrollcontainer { - flex-shrink: 0; - flex-grow: 1; - flex-basis: 0; - - &:not(.mx-scrollcontainer-fixed) { - // Make scroll container use full width and grow outside of it's parent - // this makes it fully scrollable without individual regions having scroll containers - min-height: auto; - } - - &.mx-scrollcontainer-fixed { - // Make scroll container scrollable per region - // For this we fix height to stay withing the size of the parent, - // so that regions of the scroll container can't stretch the scroll container - // even if they are higher than the screen - max-height: 100%; - min-height: 100%; - } + flex: 1 0 0; + display: flex; } .mx-scrollcontainer-horizontal { - display: flex; flex-direction: row; } .mx-scrollcontainer-vertical { - display: flex; flex-direction: column; } .mx-scrollcontainer-fixed { - // for scroll per region, regions should overflow if they have long content + // this class is added when scroll container has to scroll per region (fixed toolbar) + // to make this happen scroll container regions have to be able to shrink smaller than their children + // for this we set min-height: 0; + // this allows regions to have overflow instead of always growing for their children + min-height: 0; + .mx-scrollcontainer-left, .mx-scrollcontainer-right, .mx-scrollcontainer-center, - d .mx-scrollcontainer-middle { + .mx-scrollcontainer-middle { + min-height: 0; + // make those regions overflow, those are scrolling point overflow: auto; } + + .mx-scrollcontainer-nested { + min-height: 0; + } } // left and right regions should maintain fixed size, no shrinking or expanding @@ -88,23 +81,27 @@ .mx-scrollcontainer-right, .mx-scrollcontainer-top, .mx-scrollcontainer-bottom { - flex-grow: 0; - flex-shrink: 0; + flex: 0 0 auto; } - // center region should fill available space + + // center regions should fill available space .mx-scrollcontainer-middle, .mx-scrollcontainer-center { - flex-grow: 1; + flex: 1 1 auto; + + // wrappers inside those elements are also positioned with flex display: flex; flex-direction: column; } - // if there is a nested scroll container we always want - // outer scroll container to stay withing available height - // and don't allow inner scroll container to grow + // wrappers inside regions should fill available space + .mx-scrollcontainer-wrapper { + flex: 1 1 auto; + } + .mx-scrollcontainer-nested { - height: 100%; padding: 0; + display: flex; } // SIDEBAR TOGGLE STYLES @@ -122,7 +119,8 @@ // Animate transitions for toggleable sidebars .mx-scrollcontainer-left.mx-scrollcontainer-toggleable, .mx-scrollcontainer-right.mx-scrollcontainer-toggleable { - transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function), margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function), + transition: flex-basis var(--navsidebar-animation-duration) var(--navsidebar-animation-function), + margin-right var(--navsidebar-animation-duration) var(--navsidebar-animation-function), margin-left var(--navsidebar-animation-duration) var(--navsidebar-animation-function); z-index: 1; } @@ -218,29 +216,28 @@ } } - - // make the first child of the MAIN part of the scroll container to grow full height + // make the first child of the MAIN part of the scroll container to grow full height and allow it to shrink + // this is a custom case when a data view is the only child of the scroll region, it's footer must stick to the top + // in order to achieve this we have to make the element and the wrapper shrinkable .region-content { - display: flex; - flex-direction: column; - - & > .mx-scrollcontainer-wrapper{ - height: 100%; - flex: 1; + & > .mx-scrollcontainer-wrapper { + flex: 1 1 auto; + min-height: 0; display: flex; flex-direction: column; - & > .mx-placeholder{ - height: 100%; - flex-grow: 1; + & > .mx-placeholder { + flex: 1 1 auto; + min-height: 0; display: flex; flex-direction: column; - & > *:only-child{ - height: 100%; - flex-grow: 1; + // this implies that this only child here is top level data view + & > *:only-child { + flex: 1 1 auto; + min-height: 0; } } } } -} \ No newline at end of file +}