widget overflow now scrolls

if content is too big for widget it now scrolls.

client/src/App.jsx

@@ -19,6 +19,12 @@ function App() {
           opacity: 1 !important;
           border-radius: 5px;
         }
+
+        .react-resizable-handle-se {
+          position: sticky;
+          right: 0;
+          bottom: 0;
+        }
       `}
     />
     <Grid css={styles}

client/src/components/layout/Canvas/Widget.jsx

@@ -5,14 +5,11 @@ export default function Widget({ title }) {
   const styles = recipe();
 
   return (
-    <chakra.div >
-      <chakra.div css={styles.header}
-        className="widget-handle"
-        // style={{ padding: '4px', cursor: 'move', background: '#ddd' }}
-      >
+    <chakra.div className="react-resizable-handle-se">
+      <chakra.div css={styles.header} className="widget-handle" >
         {title}
       </chakra.div>
-      <chakra.div css={styles.canvas}>
+      <chakra.div css={styles.canvas} >
         This is the widget content - drag or resize me!
       </chakra.div>
     </chakra.div>

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

@@ -35,7 +35,7 @@ export default function WidgetCanvas() {
     };
 
     return (
-        <chakra.div height="100%" width="100%">
+        <chakra.div width="100%">
             <ResponsiveGridLayout
                 className="layout"
                 layout={layout}
@@ -49,7 +49,7 @@ export default function WidgetCanvas() {
                 onDragStop={handleDragStop}
             >
                 {layout.map((item) => (
-                    <chakra.div key={item.i} css={styles.root}>
+                    <chakra.div key={item.i} css={styles.root} >
                         <Widget title="VDAP Widget" />
                     </chakra.div>
                 ))}

client/src/theme.js

@@ -59,6 +59,7 @@ const widgetRecipe = defineSlotRecipe({
       border: "1px solid",
       borderColor: "{base300}",
       textAlign: "center",
+      overflow: "auto"
     },
     header: {
       bg: "base100",