Fix layout of newly added Widgets

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

@@ -40,7 +40,10 @@ export default function Home({...props}) {
     beginEditIfNeeded(); // Save state before anything else
     
     const newID = uuid();      // could be replaced with something else like guid
-    
+    const COLS = 16;
+    const W = w ?? 3;
+    const H = h ?? 3; 
+
     setWidgetArray([           // updating widget array containing info on the types of widgets
       ...widgetArray,
       {i: newID, widget: name }
@@ -51,8 +54,10 @@ export default function Home({...props}) {
       ...prev,
       {
         i: newID,
-        x: (prev.length * 3) % 12,
-        y: Infinity,
+        // x: (prev.length * 3) % 12,
+        // y: Infinity,
+        x: (prev.length * W) % COLS, 
+        y: 0,
         w: w, 
         h: h,
         minW: minw,

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

@@ -48,7 +48,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         useCSSTransforms={false}  // remove the sliding animation of the widgets
         className="layout"
         layout={layout}
-        cols={15} // Total columns in grid
+        cols={16} // Total columns in grid
         rowHeight={30} // Height of a single row in px
         isBounded={true} // Total width of the grid
         margin={[15, 5]} // [horizontal, vertical] gap