Merge branch 'bug/fix_ml_position' into 'main'

fix(ml_panel): fix ml panel positioning

See merge request !39

libs/shared/lib/components/Popup.tsx

 import { useState } from 'react';
 
-export const Popup = (props: { children: React.ReactNode; open: boolean; vanchor: 'left' | 'right' }) => {
+export const Popup = (props: { children: React.ReactNode; open: boolean; hAnchor: 'left' | 'right' }) => {
   return (
     <>
       {props.open && (
-        <div className={`absolute ${props.vanchor}-20 z-10 max-w-[20rem] bg-offwhite-100 flex flex-col gap-2 animate-openmenu`}>
+        <div
+          className="absolute z-10 max-w-[20rem] bg-offwhite-100 flex flex-col gap-2 animate-openmenu"
+          style={props.hAnchor === 'left' ? { left: '5rem' } : { right: '5rem' }}
+        >
           {props.children}
         </div>
       )}

libs/shared/lib/querybuilder/panel/querybuilder.tsx

@@ -450,7 +450,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
           onDrag={() => {}}
         />
       </Dialog>
-      <Popup open={openMLDialog} vanchor="right">
+      <Popup open={openMLDialog} hAnchor="right">
         <QueryBuilderMLPanel />
       </Popup>
       <ReactFlow