From e2ae65d36b07b1d64d1fd61442e5f52da37d8531 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Thu, 2 May 2024 17:48:34 +0100
Subject: [PATCH] web: Make scrollable table more discoverable

Relying in the Lea Verou technique described at
https://lea.verou.me/blog/2012/04/background-attachment-local. It makes
the scrollable table a bit more evident, but still feeling as a
workaround.
---
 web/src/assets/styles/composition.scss              |  7 +++++--
 web/src/assets/styles/utilities.scss                | 12 ++++++++++++
 web/src/components/storage/VolumeLocationDialog.jsx |  6 ++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

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}
     >
       <Form id="volume-location-form" onSubmit={onSubmit}>
-        <FormReadOnlyField label={_("Select in which device to allocate the file system")}>
+        { /** FIXME: Rename FormReadOnlyField */}
+        <FormReadOnlyField label={_("Select in which device to allocate the file system")} />
+        <div className="scrollbox">
           <VolumeLocationSelectorTable
             aria-label={_("Select a location")}
             devices={volumeDevices}
@@ -155,7 +157,7 @@ export default function VolumeLocationDialog({
             initialExpandedKeys={volumeDevices.map(d => d.sid)}
             variant="compact"
           />
-        </FormReadOnlyField>
+        </div>
         <FormGroup label={_("Select how to allocate the file system")}>
           <div className="stack">
             <Radio