diff --git a/web/src/assets/styles/composition.scss b/web/src/assets/styles/composition.scss index 306975066f..57f98a5bac 100644 --- a/web/src/assets/styles/composition.scss +++ b/web/src/assets/styles/composition.scss @@ -32,11 +32,14 @@ display: flex; flex-direction: column; flex: 1 1 0; + gap: 0 } - form > div:first-child { - min-block-size: 120px; + form > div:nth-child(2) { overflow-y: auto; + min-block-size: 120px; + margin-block-end: var(--spacer-medium); + table { background: transparent; } } form > div:last-child { diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss index 31c96d36fc..16ff87dc16 100644 --- a/web/src/assets/styles/utilities.scss +++ b/web/src/assets/styles/utilities.scss @@ -223,6 +223,18 @@ max-inline-size: calc(var(--ui-max-inline-size) + var(--spacer-large)) } +.scrollbox { + background: + linear-gradient(#fff 33%, rgb(255 255 255 / 0%)), + linear-gradient(rgb(255 255 255 / 0%), #fff 66%) 0 100%, + radial-gradient(farthest-side at 50% 0, rgb(102 102 102 / 50%), rgb(0 0 0 / 0%)), + radial-gradient(farthest-side at 50% 100%, rgba(102 102 102 / 50%), rgb(0 0 0 / 0%)) 0 100%; + background-color: #fff; + background-repeat: no-repeat; + background-attachment: local, local, scroll, scroll; + background-size: 100% 48px, 100% 48px, 100% 16px, 100% 16px; +} + .height-75 { height: 75dvh; } diff --git a/web/src/components/storage/VolumeLocationDialog.jsx b/web/src/components/storage/VolumeLocationDialog.jsx index 946d05259a..b94350c0e4 100644 --- a/web/src/components/storage/VolumeLocationDialog.jsx +++ b/web/src/components/storage/VolumeLocationDialog.jsx @@ -142,7 +142,9 @@ export default function VolumeLocationDialog({ {...props} >