a few more changes

+ boxshadow is constant
+ new resize handle
+ minW and minH set on widgets

client/src/components/Canvas/views/Home.jsx

@@ -12,7 +12,7 @@ import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 
 export default function Home({...props}) {
   // deconstructing props
-  const { width, height, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
+  const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
     isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
 
   const onAddWidget = (ID) => {
@@ -21,10 +21,13 @@ export default function Home({...props}) {
       {
         i: ID,
         x: (prev.length * 3) % 12,
-        y: Infinity, 
-        w: 3, 
-        h: 3,
-        static: false
+        y: Infinity,
+        w: 2, 
+        h: 5,
+        minW: 2,
+        minH: 5,
+        static: false,
+        resizeHandles: ['se']
       }
     ]);
     onEditWidgets();

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,5 +1,6 @@
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
+import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
 
 export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
   console.log("rendering MyDashboard");
@@ -36,11 +37,14 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         draggableHandle=".widget-handle" // Make only the header draggable
         onDragStart={handleDragStart}
         onDragStop={handleDragStop}
+        position="relative"
+        resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
+        isResizable={isEditable}
       >
         {merged.map((item) => {
           const Widget = item.widget;
           return (
-            <Flex key={item.i} css={styles.root} boxShadow={isEditable ? "md":undefined} height="100%" >
+            <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
               <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
             </Flex>
           )