Update the size and behavior of added widgets

client/src/constants/widgetRegistry.jsx

@@ -12,7 +12,7 @@ export const WIDGET_REGISTRY = {
         category: "Aviation",
         description: "Displays 7-day flight level timelines across multiple volcanoes.",
         allowedSizes: {
-            large: { w: 12, h: 8 }, // Spans the entire width of the screen
+            xlarge: { w: 12, h: 12 },
         }
     },
 
@@ -21,8 +21,8 @@ export const WIDGET_REGISTRY = {
         category: "Computer Science",
         description: "Bar chart showing cache table operational status.",
         allowedSizes: {
-            medium: { w: 4, h: 6 }, // 1/3 width
+            small: { w: 3, h: 12 },
-            large:  { w: 6, h: 6 }  // 1/2 width
+            medium:  { w: 6, h: 12 }
         }
     },
 
@@ -31,8 +31,8 @@ export const WIDGET_REGISTRY = {
         category: "Communications",
         description: "Feed of recent IVANS reports and reviewer statuses.",
         allowedSizes: {
-            small:  { w: 3, h: 6 }, // 1/4 width (tall and skinny)
+            small:  { w: 3, h: 12 },
-            medium: { w: 4, h: 8 }  // 1/3 width
+            medium: { w: 6, h: 24 }
         }
     },
 
@@ -41,7 +41,7 @@ export const WIDGET_REGISTRY = {
         category: "Remote Sensing",
         description: "Feed of recent remote sensing reports.",
         allowedSizes: {
-            medium: { w: 4, h: 5 }, // 1/3 width
+            small: { w: 3, h: 12 },
         }
     },
 
@@ -50,8 +50,8 @@ export const WIDGET_REGISTRY = {
         category: "Daily Alerts",
         description: "List of 7-day alert level changes with trend arrows.",
         allowedSizes: {
-            small: { w: 3, h: 5 },
+            small: { w: 3, h: 12 },
-            medium: { w: 4, h: 5 }
+            large: { w: 9, h: 12 }
         }
     }
 };

client/src/store/useDashboardStore.jsx

@@ -45,13 +45,34 @@ export const useDashboardStore = create((set, get) => ({
         }
 
         const dimensions = registryEntry.allowedSizes[sizeKey];
+        const widgets = get().widgets;
 
+        // Default to spawning on the far left on a new row
+        let startX = 0;
+        let startY = Infinity;
+
+        if (widgets.length > 0) {
+            // 1. Find the lowest 'y' value (the start of the bottom row)
+            const bottomRowY = Math.max(...widgets.map(w => w.y));
+
+            // 2. Grab all the widgets that are sitting on that exact row
+            const bottomRowWidgets = widgets.filter(w => w.y === bottomRowY);
+
+            // 3. Find the right-most edge of those widgets (x position + width)
+            const rightmostEdge = Math.max(...bottomRowWidgets.map(w => w.x + w.w));
+
+            // 4. If the right-most edge PLUS the new widget's width fits in 12 columns...
+            if (rightmostEdge + dimensions.w <= 12) {
+                startX = rightmostEdge; // ...tuck it right next to the last widget!
+                startY = bottomRowY;    // ...and keep it on the same row.
+            }
+        }
         const newWidget = {
             id: uuid(),
             type: widgetId,
             size: sizeKey,
-            x: 0,
+            x: startX,
-            y: Infinity,     // RGL's auto-packer drops this exactly into the first available slot at the bottom
+            y: startY,
             w: dimensions.w,
             h: dimensions.h
         };