feat(modal): add scroll indicators

src/components/modal/Modal.vue

 <script setup lang="ts">
+import { useScroll, useResizeObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
 const title = defineProp<string>('title', { required: true })
 const open = defineModel<boolean>({ required: true })
+
+const content = ref<HTMLDivElement>()
+const { arrivedState } = useScroll(content)
+
+const scrollable = ref(false)
+useResizeObserver(content, () => {
+  const div = content.value
+  if (!div) return
+
+  if (div.scrollHeight > div.clientHeight) {
+    scrollable.value = true
+  } else {
+    scrollable.value = false
+  }
+})
 </script>
 
 <template>
@@ -13,7 +31,7 @@ const open = defineModel<boolean>({ required: true })
             <FwButton icon="bi:x-lg" color="secondary" variant="ghost" @click="open = false" />
           </h2>
 
-          <div class="modal-content">
+          <div class="modal-content" ref="content" :class="[arrivedState, { scrollable }]">
             <Transition>
               <div v-if="$slots.alert" class="alert-container">
                 <div>

src/components/modal/style.scss

@@ -30,6 +30,19 @@
     padding: 1rem 2rem;
     overflow: auto;
     position: relative;
+    background: var(--fw-beige-100);
+
+    &.scrollable {
+      &:not(.top),
+      &:not(.bottom) + * {
+        border-top: 1px solid var(--fw-gray-300);
+      }
+
+      &:not(.top) > .alert-container {
+        margin-top: calc(-1rem - 1px);
+        top: calc(-1rem - 1px);
+      }
+    }
 
     > .alert-container {
       position: sticky;