From 2960b939d952d6e3fb5693aac0fa8181070cf82f Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Wed, 12 Feb 2025 14:51:38 +0100
Subject: [PATCH] feat(ui): add soft shadows inside modal to hint at scrolling
 behavior

---
 front/src/components/ui/Modal.vue  |  8 ++++++--
 front/src/components/ui/modal.scss | 27 ++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue
index 6e8eebb08..d26fa4ab3 100644
--- a/front/src/components/ui/Modal.vue
+++ b/front/src/components/ui/Modal.vue
@@ -52,7 +52,7 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
           ]"
           v-bind="{...$attrs, ...color(props)}"
         >
-          <Layout flex gap-12 style="padding: 12px;">
+          <Layout flex gap-12 style="padding: 12px 12px 0 12px;">
             <div style="width: 48px;" v-if="!$slots.topleft && !icon" />
             <div v-if="icon" style="display: flex; justify-content: center; align-items: center; width: 48px;">
               <i :class="['bi', icon]" style="font-size: 18px;"/>
@@ -70,6 +70,8 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
 
           <!-- Content -->
 
+          <div class="modal-shadow-top" />
+
           <div class="modal-content">
             <Transition>
               <div v-if="$slots.alert" class="alert-container">
@@ -81,9 +83,11 @@ onKeyboardShortcut('escape', () => isOpen.value = false)
 
             <slot />
 
-            <Spacer size-46 v-if="!$slots.actions" />
+            <Spacer v-if="!$slots.actions" />
           </div>
 
+          <div class="modal-shadow-bottom" />
+
           <!-- Actions slot -->
 
           <Layout flex gap-12 style="flex-wrap: wrap;" v-if="$slots.actions || cancel" class="modal-actions">
diff --git a/front/src/components/ui/modal.scss b/front/src/components/ui/modal.scss
index 4bf9bb193..0a3bd21a3 100644
--- a/front/src/components/ui/modal.scss
+++ b/front/src/components/ui/modal.scss
@@ -10,6 +10,8 @@
   max-height: 90vh;
   grid-template-rows: auto 1fr auto;
 
+  position: relative;
+
   &.is-destructive {
     border-top: 24px solid var(--fw-red-400);
 
@@ -37,7 +39,7 @@
   }
 
   .modal-content {
-    padding: 1rem 2rem;
+    padding: 1rem 2rem 3rem 2rem;
     overflow: auto;
     position: relative;
 
@@ -65,6 +67,27 @@
     }
   }
 
+  .modal-shadow-top {
+    z-index: 2;
+    height: 16px;
+    width: 100%;
+    position: absolute;
+    top: 60px;
+    background:linear-gradient(var(--background-color), color-mix(in oklab, var(--background-color) 50%, transparent), color-mix(in oklab, var(--background-color) 20%, transparent), transparent);
+  }
+
+  .modal-shadow-bottom {
+    height: 32px;
+    margin-top: -32px;
+    position: sticky;
+    bottom: 0px;
+    background:linear-gradient(transparent, color-mix(in oklab, var(--background-color) 20%, transparent), color-mix(in oklab, var(--background-color) 50%, transparent), var(--background-color));
+    &:last-child{
+      border-bottom-right-radius: 1rem;
+      border-bottom-left-radius: 1rem;
+    }
+  }
+
   .modal-actions {
     padding: 0 2rem 1rem 2rem;
     display: flex;
@@ -78,6 +101,8 @@
     > :last-child {
       margin-right: 0px !important;
     }
+
+    position: relative;
   }
 }