Merge branch 'add/widgets/theme' into 'main'

widget overflow now scrolls

See merge request vkuchenik/website-framework!20

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,11 +5,8 @@ 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} >

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}

client/src/theme.js

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