diff --git a/ui/desktop/CHANGELOG.md b/ui/desktop/CHANGELOG.md index cee2b0afe..6491ca19a 100644 --- a/ui/desktop/CHANGELOG.md +++ b/ui/desktop/CHANGELOG.md @@ -5,6 +5,10 @@ Canonical reference for changes, improvements, and bugfixes for Boundary Desktop ## Next +### New & Improved + +- Scrolling now occurs within columns individually so that sidebar and header remain visible when scrolling the application body. ([PR](https://github.com/hashicorp/boundary-ui/pull/482)) + ### Changes/Deprecations - Boundary origin validation now occurs via Electron's built-in net request module, ensuring the validation request is made via chromium's networking library rather than Node's. ([PR](https://github.com/hashicorp/boundary-ui/pull/480)) diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index d361d91f6..be3610b51 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -19,6 +19,25 @@ } } +/** + * This section enables scrolling within the sidebar columns separately, + * rather than the whole viewport. This ensures the sidebar and application + * header remain visible when scrolling. + */ +.rose-layout-global { + max-height: 100vh; + + .rose-layout-global-body { + max-height: 100vh; + overflow: hidden; + } + + .rose-layout-sidebar-sidebar, + .rose-layout-sidebar-body { + overflow-y: scroll; + } +} + .rose-nav-sidebar { margin-top: sizing.rems(xxl); @@ -167,7 +186,7 @@ 0% { background-color: var(--action-subtler-1); } - + 100% { background-color: transparent; }