Fix notebook being unable to resize (#40136) (#40172)

* Use Mantine instead of styled components

* Fix notebook being unable to resize

Fixes #33982

* Address review commments

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/query_builder/components/DatasetEditor/ResizableNotebook/ResizableNotebook.jsx

 import PropTypes from "prop-types";
+import { forwardRef } from "react";
 import { ResizableBox } from "react-resizable";
 
+import { darken } from "metabase/lib/colors";
 import Notebook from "metabase/query_builder/components/notebook/Notebook";
-
-import { NotebookContainer, Handle } from "./ResizableNotebook.styled";
+import { Flex, Box } from "metabase/ui";
 
 const propTypes = {
   isResizing: PropTypes.bool.isRequired,
@@ -11,6 +12,42 @@ const propTypes = {
   onResizeStop: PropTypes.func.isRequired,
 };
 
+/**
+ * Prevents automatic scroll effect on queries with lots of steps.
+ * When overflow is 'scroll' and the notebook is being resized,
+ * its height changes and it scrolls automatically.
+ * Setting the overflow to "hidden" while resizing fixes that behavior.
+ * @link Demo: https://github.com/metabase/metabase/pull/19103#issuecomment-981935878
+ */
+const getOverflow = isResizing => (isResizing ? "hidden" : "scroll");
+
+const Handle = forwardRef(function Handle(props, ref) {
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      w="100%"
+      h="sm"
+      pos="absolute"
+      bottom="-0.25rem"
+      style={{
+        cursor: "row-resize",
+      }}
+      ref={ref}
+      {...props}
+    >
+      <Box
+        w="6.25rem"
+        h="xs"
+        bg={darken("border", 0.03)}
+        style={{
+          borderRadius: "xs",
+        }}
+      ></Box>
+    </Flex>
+  );
+});
+
 function ResizableNotebook({
   isResizing,
   onResizeStop,
@@ -28,9 +65,9 @@ function ResizableNotebook({
         onResizeStop(...args);
       }}
     >
-      <NotebookContainer isResizing={isResizing}>
+      <Box w="100%" style={{ overflowY: getOverflow(isResizing) }}>
         <Notebook {...notebookProps} hasVisualizeButton={false} />
-      </NotebookContainer>
+      </Box>
     </ResizableBox>
   );
 }

frontend/src/metabase/query_builder/components/DatasetEditor/ResizableNotebook/ResizableNotebook.styled.tsx

-import styled from "@emotion/styled";
-import type { ComponentProps } from "react";
-
-import { color, darken } from "metabase/lib/colors";
-
-export const NotebookContainer = styled.div<{ isResizing: boolean }>`
-  width: 100%;
-  overflow-y: ${props => {
-    // Prevents automatic scroll effect on queries with lots of steps.
-    // When overflow is 'scroll' and the notebook is being resized,
-    // it's height changes and it scrolls automatically.
-    // Setting the overflow to "hidden" while resizing fixes that behavior
-    // Demo: https://github.com/metabase/metabase/pull/19103#issuecomment-981935878
-    return props.isResizing ? "hidden" : "scroll";
-  }};
-`;
-
-const HandleContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  height: 8px;
-  width: 100%;
-
-  position: absolute;
-  bottom: -4px;
-
-  cursor: row-resize;
-`;
-
-const HandleContent = styled.div`
-  width: 100px;
-  height: 5px;
-  border-radius: 4px;
-  background-color: ${darken(color("border"), 0.03)};
-`;
-
-export function Handle(props: ComponentProps<typeof HandleContainer>) {
-  return (
-    <HandleContainer {...props}>
-      <HandleContent />
-    </HandleContainer>
-  );
-}