some small changes

+ removed sliding animation from widgets
+ added form fields to Alert Level widget

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>
     );
 }

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>
   );
 }

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>
     </>

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 } />

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>
           )

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: {