widgets are bound to container

figured out how to set bounds so widgets don't go off screen!

client/src/components/layout/Canvas/views/WidgetCanvas.jsx

@@ -3,13 +3,17 @@
 // Content not included, must be populated using custom charts plots and notifications
 
 import { useState } from 'react';
-import GridLayout from 'react-grid-layout';
+import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../Widget.jsx';
-import { Box } from '@chakra-ui/react';
+import { useSlotRecipe, chakra } from '@chakra-ui/react';
 
 export default function WidgetCanvas() {
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
+    const recipe = useSlotRecipe({ key: "widget" });
+    const styles = recipe();
+    const ResponsiveGridLayout = WidthProvider(GridLayout);
+
     const [layout, setLayout] = useState([
         { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
         { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
@@ -22,21 +26,21 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <GridLayout
+        <ResponsiveGridLayout
             className="layout"
             layout={layout}
             cols={12} // Total columns in grid
             rowHeight={30} //Height of a single row in px
-            width={1200} // Total width of the grid
+            isBounded={true} // Total width of the grid
             margin={[10, 10]} // [horizontal, vertical] gap
             onLayoutChange={onLayoutChange}
             draggableHandle=".widget-handle" // Make only the header draggable
         >
             {layout.map((item) => (
-                <div key={item.i} style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                <chakra.div key={item.i} css={styles.root}>
                     <Widget title="VDAP Widget" />
-                </div>
+                </chakra.div>
             ))}
-        </GridLayout>
+        </ResponsiveGridLayout>
     );
 }