Persist sort priority!

src-web/components/core/Button.tsx

@@ -43,7 +43,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     () =>
       classnames(
         className,
-        'outline-none pointer-events-auto',
+        'outline-none',
         'border border-transparent focus-visible:border-blue-300',
         'rounded-md flex items-center',
         colorStyles[color || 'default'],

src-web/components/core/Dropdown.tsx

@@ -143,7 +143,7 @@ const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentPro
       const t = setTimeout(() => {
         const windowBox = document.documentElement.getBoundingClientRect();
         const menuBox = divRef.getBoundingClientRect();
-        const styles = { maxHeight: windowBox.height - menuBox.top - 5 - 45 };
+        const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
         setStyles(styles);
       });
       return () => clearTimeout(t);

src-web/components/core/ScrollArea.tsx

@@ -9,8 +9,8 @@ interface Props {
 
 export function ScrollArea({ children, className }: Props) {
   return (
-    <S.Root className={classnames(className, 'group/scroll')} type="always">
-      <S.Viewport>{children}</S.Viewport>
+    <S.Root className={classnames(className, 'group/scroll overflow-hidden')} type="hover">
+      <S.Viewport className="h-full w-full">{children}</S.Viewport>
       <ScrollBar orientation="vertical" />
       <ScrollBar orientation="horizontal" />
       <S.Corner />
@@ -23,12 +23,12 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
     <S.Scrollbar
       orientation={orientation}
       className={classnames(
-        'flex bg-transparent rounded-full',
+        'scrollbar-track flex rounded-full',
         orientation === 'vertical' && 'w-1.5',
         orientation === 'horizontal' && 'h-1.5 flex-col',
       )}
     >
-      <S.Thumb className="flex-1 bg-gray-100 group-hover/scroll:bg-gray-200 rounded-full" />
+      <S.Thumb className="scrollbar-thumb flex-1 rounded-full" />
     </S.Scrollbar>
   );
 }

src-web/components/core/Stacks.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { ComponentType, ReactNode } from 'react';
+import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
 
 const gapClasses = {
   0: 'gap-0',
@@ -23,9 +23,9 @@ export function HStack({ className, space, children, ...props }: HStackProps) {
   );
 }
 
-export interface VStackProps extends BaseStackProps {
+export type VStackProps = BaseStackProps & {
   children: ReactNode;
-}
+};
 
 export function VStack({ className, space, children, ...props }: VStackProps) {
   return (
@@ -38,14 +38,12 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
   );
 }
 
-interface BaseStackProps {
+type BaseStackProps = HTMLAttributes<HTMLElement> & {
   as?: ComponentType | 'ul';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
-  className?: string;
-  children?: ReactNode;
-}
+};
 
 function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
   const Component = as ?? 'div';