feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/ui/scrollbar/scrollbar.tsx

@@ -10,6 +10,7 @@ export type ScrollableContainerProps = {
   inTableView?: boolean;
   className?: string;
   viewPortClassName?: string;
+  styles?: React.CSSProperties;
 };
 
 export const ScrollableContainer = ({
@@ -17,11 +18,13 @@ export const ScrollableContainer = ({
   showScrollTopBorder = false,
   inTableView = false,
   className,
+  styles: _styles,
   viewPortClassName,
 }: PropsWithChildren<ScrollableContainerProps>) => {
   const [hasScrollTop, ref] = useHasScrollTop();
   return (
     <ScrollArea.Root
+      style={_styles}
       className={clsx(styles.scrollableContainerRoot, className)}
     >
       <div