a few more changes

+ boxshadow is constant
+ new resize handle
+ minW and minH set on widgets

client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx

@@ -15,9 +15,9 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
         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>
+        <Field.Root orientation="horizontal" >
+            <HStack display="flex" spacing={4} align="center" width="100%">
+              <Field.Label display="flex" whiteSpace="nowrap">Country Name</Field.Label>
               <Input {...register("countryname")} placeholder="Enter country name"/>
             </HStack>
         </Field.Root>

client/src/components/Canvas/CanvasComponents/CustomResizeHandle.jsx

@@ -0,0 +1,27 @@
+import { RiExpandDiagonal2Line } from "react-icons/ri";
+import React from "react";
+
+const CustomResizeHandle = React.forwardRef((props, ref) => {
+  const { handleAxis, isVisable, ...restProps } = props;
+  if (!isVisable) return null;
+  return (
+    <div
+      ref={ref}
+      {...restProps}
+      className={`resize-hande-${handleAxis}`}
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        cursor: "pointer",
+        width: "20px",
+        height: "20px",
+        zIndex: "1",
+      }}
+    >
+      <RiExpandDiagonal2Line />
+    </div>
+  );
+});
+
+export default CustomResizeHandle;

client/src/components/Canvas/CanvasComponents/Widget.jsx

@@ -1,4 +1,5 @@
-import { useSlotRecipe, chakra, Flex, CloseButton, Text } from "@chakra-ui/react"
+import { useSlotRecipe, chakra, Flex, CloseButton, Text, IconButton } from "@chakra-ui/react"
+import { FaEllipsisH } from "react-icons/fa";
 
 export default function Widget({ id, title, isEditable, isDelete, DeleteWidget, children }) {
   const recipe = useSlotRecipe({ key: "widget" });
@@ -16,11 +17,14 @@ export default function Widget({ id, title, isEditable, isDelete, DeleteWidget,
           </>
         ):(
           <>
-            <Text  display="flex" alignItems="center" height="32px" className="widget-handle" fontWeight="bold">{title}</Text>
+            <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+              <Text className="widget-handle" w="100%" display="flex" alignItems="center" height="32px" fontWeight="bold">{title}</Text>
+              <IconButton size="xs" bg="base300" cursor="pointer"><FaEllipsisH fill="text"/></IconButton>
+            </Flex>
           </>
         )}
       </chakra.div>
-      <chakra.div height="100%">
+      <chakra.div height="100%" mb="3">
         {children}
       </chakra.div>
     </>