fix: Consistent menus in editor (#3363)

* Use scrollable in context menu

* fix: Remove old blockToolbar styles

app/components/Scrollable.tsx

@@ -3,16 +3,17 @@ import * as React from "react";
 import styled from "styled-components";
 import useWindowSize from "~/hooks/useWindowSize";
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLDivElement> & {
   shadow?: boolean;
   topShadow?: boolean;
   bottomShadow?: boolean;
+  hiddenScrollbars?: boolean;
   flex?: boolean;
   children: React.ReactNode;
 };
 
 function Scrollable(
-  { shadow, topShadow, bottomShadow, flex, ...rest }: Props,
+  { shadow, topShadow, bottomShadow, hiddenScrollbars, flex, ...rest }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const fallbackRef = React.useRef<HTMLDivElement>();
@@ -55,6 +56,7 @@ function Scrollable(
       ref={ref || fallbackRef}
       onScroll={updateShadows}
       $flex={flex}
+      $hiddenScrollbars={hiddenScrollbars}
       $topShadowVisible={topShadowVisible}
       $bottomShadowVisible={bottomShadowVisible}
       {...rest}
@@ -66,6 +68,7 @@ const Wrapper = styled.div<{
   $flex?: boolean;
   $topShadowVisible?: boolean;
   $bottomShadowVisible?: boolean;
+  $hiddenScrollbars?: boolean;
 }>`
   display: ${(props) => (props.$flex ? "flex" : "block")};
   flex-direction: column;
@@ -90,6 +93,17 @@ const Wrapper = styled.div<{
     return "none";
   }};
   transition: all 100ms ease-in-out;
+
+  ${(props) =>
+    props.$hiddenScrollbars &&
+    `
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `}
 `;
 
 export default observer(React.forwardRef(Scrollable));