optimize: overlay scrollbar

src/ui/Shared/Scrollbar/index.tsx

-import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import {
+  OverlayScrollbarsComponent,
+  OverlayScrollbarsComponentProps,
+} from "overlayscrollbars-react";
 
+/**
+ * @desc 创建漂亮的滚动条，包裹一些可能溢出的元素。
+ * @why chrome在113之后，取消了overflow: overlay的支持，所以需要使用overlayScrollbars来实现。
+ */
 export const ScrollableArea: React.FC<
-  React.ComponentProps<typeof OverlayScrollbarsComponent>
-> = ({ options, children, ...rest }) => (
+  React.PropsWithChildren<{
+    scrollProps?: OverlayScrollbarsComponentProps;
+    elementProps?: React.HTMLAttributes<HTMLElement>;
+    className?: string;
+    style?: React.CSSProperties;
+  }>
+> = ({ scrollProps = {}, elementProps, className, style, children }) => {
+  const { options = {}, ...rest } = scrollProps;
+  scrollProps;
+  return (
     <OverlayScrollbarsComponent
       options={{
         scrollbars: {
@@ -16,8 +31,14 @@ export const ScrollableArea: React.FC<
         ...options,
       }}
       defer
+      style={{
+        height: "100%",
+      }}
       {...rest}
     >
+      <div className={className} style={style} {...elementProps}>
         {children}
+      </div>
     </OverlayScrollbarsComponent>
-);
+  );
+};