From 39ca605fbd31a9ba352bbc6ec4d29980728227f8 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Tue, 5 Aug 2025 15:19:46 -0700
Subject: [PATCH 1/2] add removal of widgets in widgetArray

---
 client/src/components/Canvas/views/Home.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx
index 68558f2..9e9c313 100644
--- a/client/src/components/Canvas/views/Home.jsx
+++ b/client/src/components/Canvas/views/Home.jsx
@@ -67,7 +67,7 @@ export default function Home({...props}) {
   const DeleteWidget = (ID) => {
     console.log("Deleting widget with id: ", ID);
     setLayout(layout => layout.filter(w => w.i !== ID));
-    // add removal for widgetArray here
+    setWidgetArray(widgetArray => widgetArray.filter(w => w.i !== ID));
   }
 
   const DeleteAll = () => {

From 4fb2f7eabe48c237e08a0b5a9bbbcf6352c5e1e0 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Tue, 5 Aug 2025 17:12:59 -0700
Subject: [PATCH 2/2] some small changes

+ removed sliding animation from widgets
+ added form fields to Alert Level widget
---
 client/src/components/Canvas/Canvas.jsx       |  7 ++++---
 .../CanvasComponents/AlertLevelWidget.jsx     | 21 +++++++++++++++++--
 .../Canvas/CanvasComponents/Widget.jsx        |  4 ++--
 client/src/components/Canvas/views/Home.jsx   |  7 ++++---
 .../Canvas/views/HomeTabs/MyDashboard.jsx     |  3 ++-
 client/src/theme.js                           |  6 +++++-
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx
index 5b3158b..1e9c6a9 100644
--- a/client/src/components/Canvas/Canvas.jsx
+++ b/client/src/components/Canvas/Canvas.jsx
@@ -6,14 +6,15 @@ import Account from "./views/Account"
 import Settings from "./views/Settings"
 import Home from "./views/Home";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
+import { chakra } from "@chakra-ui/react";
 
 export default function Canvas({...props}) {
   const { view } = props;
     return (
-        <>
+        <chakra.div width="100%">
             {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
-                <Home width="100%" height="100%" {...props}/>
+                <Home {...props}/>
             )}
             {view === "global" && <GlobalMap />}
             {view === "regional" && <RegionalMap />}
@@ -21,6 +22,6 @@ export default function Canvas({...props}) {
             {view === "admin" && <Admin />}
             {view === "account" && <Account />}
             {view === "settings" && <Settings />}
-        </>
+        </chakra.div>
     );
 }
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx b/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx
index ba880ca..a66f0f0 100644
--- a/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx
+++ b/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx
@@ -1,10 +1,27 @@
 import Widget from "./Widget";
-import { Text } from "@chakra-ui/react";
+import { HStack, Box, Field, Input, Button } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
 
 export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
+  const { register, handleSubmit } = useForm();
+  const onSubmit = (data) => console.log(data);
+
   return (
     <Widget id={id} title="Alert Level" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}>
-      <Text>Input volcano and country</Text>
+      <Box 
+        as="form" 
+        onSubmit={handleSubmit(onSubmit)}
+        width="100%"
+        height="100%"
+        p={2}
+      >
+        <Field.Root orientation="horizontal" align>
+            <HStack spacing={4} align="center" width="100%">
+              <Field.Label whiteSpace="nowrap" width="100%">Country Name</Field.Label>
+              <Input {...register("countryname")} placeholder="Enter country name"/>
+            </HStack>
+        </Field.Root>
+      </Box>
     </Widget>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/Canvas/CanvasComponents/Widget.jsx b/client/src/components/Canvas/CanvasComponents/Widget.jsx
index d1ecaa2..4cd41c2 100644
--- a/client/src/components/Canvas/CanvasComponents/Widget.jsx
+++ b/client/src/components/Canvas/CanvasComponents/Widget.jsx
@@ -16,11 +16,11 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget,
           </>
         ):(
           <>
-            <Text className="widget-handle" fontWeight="bold">{title}</Text>
+            <Text  display="flex" alignItems="center" height="32px" className="widget-handle" fontWeight="bold">{title}</Text>
           </>
         )}
       </chakra.div>
-      <chakra.div css={styles.canvas} >
+      <chakra.div height="100%">
         {children}
       </chakra.div>
     </>
diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx
index 9e9c313..8233705 100644
--- a/client/src/components/Canvas/views/Home.jsx
+++ b/client/src/components/Canvas/views/Home.jsx
@@ -89,8 +89,8 @@ export default function Home({...props}) {
   return (
     /* HEADER */
     <Tabs.Root 
-      width={width}
-      height={height}
+      width="100%"
+      height="100%"
       lazyMount 
       value={ view }
       variant="line"
@@ -110,6 +110,7 @@ export default function Home({...props}) {
 				pt={3}
 				align="center"
 				justify="space-between"
+        width="100%"
       >
         <Tabs.List>
           <Tabs.Trigger value="mydashboard" fontSize="lg">
@@ -129,7 +130,7 @@ export default function Home({...props}) {
           </Tabs.Trigger>
         </Tabs.List>
 
-        <HStack >
+        <HStack width="258px" justifyContent="flex-end">
           {isEditable ? (
             <>
               <SaveButton onSave={ onSave } />
diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
index 82b31bf..6cfcffd 100644
--- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
+++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx
@@ -25,6 +25,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
   return (
     <chakra.div width="100%">
       <ResponsiveGridLayout
+        useCSSTransforms={false}  // remove the sliding animation of the widgets
         className="layout"
         layout={layout}
         cols={12} // Total columns in grid
@@ -39,7 +40,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         {merged.map((item) => {
           const Widget = item.widget;
           return (
-            <Flex key={item.i} css={styles.root} height="100%" >
+            <Flex key={item.i} css={styles.root} boxShadow={isEditable ? "md":undefined} height="100%" >
               <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
             </Flex>
           )
diff --git a/client/src/theme.js b/client/src/theme.js
index ba8c4b7..26a033c 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -71,7 +71,8 @@ const widgetRecipe = defineSlotRecipe({
       border: "1px solid",
       borderColor: "{base300}",
       textAlign: "center",
-      height: "100%"
+      height: "100%",
+      position: "fixed"
     },
     header: {
       flexShrink: "0",
@@ -152,6 +153,9 @@ const config = defineConfig({
         filter: "invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
       }
     },
+    ".react-grid-item": {
+      transition: "none !important"
+    },
   },
   theme: {
     semanticTokens: {