diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss b/frontend/src/app/main/ui/ds/layout/tab_switcher.scss index c03a03e047..de1c34ccfc 100644 --- a/frontend/src/app/main/ui/ds/layout/tab_switcher.scss +++ b/frontend/src/app/main/ui/ds/layout/tab_switcher.scss @@ -114,6 +114,7 @@ display: grid; width: 100%; height: 100%; + min-block-size: 0; outline: $b-1 solid var(--tab-panel-outline-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index d66dcdc4ff..bb17de88fb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -97,9 +97,7 @@ sitemap-height (if sitemap-collapsed? 32 height)] - [:article {:class (stl/css :layers-tab) - :style {:--height (dm/str height "px")}} - + [:article {:class (stl/css :layers-tab)} [:> sitemap* {:layout layout :height sitemap-height :collapsed sitemap-collapsed? diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 66239eb9e9..ebfaa57ea3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -79,13 +79,15 @@ .layers-tab { padding-block-start: var(--sp-xs); - overflow-x: hidden; + display: flex; + flex-direction: column; + overflow: hidden; + min-block-size: 0; } .layers-tab-resize-area { background-color: var(--color-background-primary); - position: absolute; - inset-inline-start: 0; + flex: 0 0 auto; inline-size: 100%; padding: px2rem(3) 0 px2rem(1); block-size: $sz-6; @@ -120,11 +122,16 @@ .left-sidebar-content { grid-area: content; inset-inline-end: calc(-1 * var(--sp-s)); + min-block-size: 0; + overflow: hidden; } .left-sidebar-tabs { --tabs-nav-padding-inline-start: var(--sp-m); --tabs-nav-padding-inline-end: var(--sp-m); + + block-size: 100%; + min-block-size: 0; } .left-sidebar-resize-area { diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 328c92afdb..d329a3d2fb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -31,11 +31,10 @@ } .tool-window-content { - --calculated-height: calc(#{px2rem(136)} + var(--height, #{$sz-200})); - display: flex; flex-direction: column; - block-size: calc(100vh - var(--calculated-height)); + flex: 1 1 auto; + min-block-size: 0; inline-size: calc(var(--left-sidebar-width) + var(--depth) * var(--layer-indentation-size)); overflow: auto; scrollbar-gutter: stable; @@ -117,6 +116,10 @@ .layers { position: relative; + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-block-size: 0; } .replace-wrapper { diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index 4bfbe1c95d..e8f5e46574 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -15,7 +15,8 @@ position: relative; display: flex; flex-direction: column; - flex: 1; + flex: 0 0 auto; + flex-shrink: 0; inline-size: 100%; block-size: var(--height, $sz-200); }