fix: layout error

packages/@core/uikit/shadcn-ui/package.json

@@ -50,7 +50,7 @@
     "@vben-core/iconify": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "@vueuse/core": "^10.10.0",
+    "@vueuse/core": "^10.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
     "radix-vue": "^1.8.3",

packages/@core/uikit/shadcn-ui/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './logo';
 export * from './menu-badge';
 export * from './pin-input';
 export * from './popover';
+export * from './scrollbar';
 export * from './segmented';
 export * from './sheet';
 export * from './spinner';

packages/@core/uikit/shadcn-ui/src/components/scrollbar/index.ts

@@ -0,0 +1 @@
+export { default as VbenScrollbar } from './scrollbar.vue';

packages/@core/uikit/shadcn-ui/src/components/scrollbar/scrollbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { ref } from 'vue';
+
+import { ScrollArea } from '#/components/ui/scroll-area';
+import { cn } from '#/lib/utils';
+
+interface Props {
+  class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+});
+
+const isAtTop = ref(true);
+const isAtBottom = ref(false);
+
+function handleScroll(event: Event) {
+  const target = event.target as HTMLElement;
+  const scrollTop = target?.scrollTop ?? 0;
+  const offsetHeight = target?.offsetHeight ?? 0;
+  const scrollHeight = target?.scrollHeight ?? 0;
+  isAtTop.value = scrollTop <= 0;
+  isAtBottom.value = scrollTop + offsetHeight >= scrollHeight;
+}
+</script>
+
+<template>
+  <ScrollArea
+    :class="[
+      cn(props.class),
+      {
+        // 'shadow-none': isAtTop && isAtBottom,
+        // shadow: !isAtTop || !isAtBottom,
+        // 'dark:shadow-white/20': !isAtTop || !isAtBottom,
+        // 'shadow-inner': !isAtBottom,
+        // 'dark:shadow-inner-white/20': !isAtBottom,
+      },
+    ]"
+    :on-scroll="handleScroll"
+  >
+    <slot></slot>
+  </ScrollArea>
+</template>

packages/@core/uikit/shadcn-ui/src/components/sheet/sheet.vue

@@ -4,7 +4,7 @@ import { computed, useSlots } from 'vue';
 import { Cross2Icon } from '@radix-icons/vue';
 
 import { VbenButton, VbenIconButton } from '#/components/button';
-import { ScrollArea } from '#/components/ui/scroll-area';
+import { VbenScrollbar } from '#/components/scrollbar';
 import {
   Sheet,
   SheetClose,
@@ -89,9 +89,9 @@ function handlerSubmit() {
         </SheetClose>
       </SheetHeader>
       <div class="h-full pb-16">
-        <ScrollArea class="h-full">
+        <VbenScrollbar class="h-full">
           <slot></slot>
-        </ScrollArea>
+        </VbenScrollbar>
       </div>
       <SheetFooter v-if="showFooter || slots.footer" as-child>
         <div