some small changes

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

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