Fix rendering area in safari

src/components/EditorCanvas/Area.jsx

@@ -100,43 +100,41 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
             hovered
               ? "border-dashed border-blue-500"
               : selectedElement.element === ObjectType.AREA &&
-                selectedElement.id === data.id
+                  selectedElement.id === data.id
-              ? "border-blue-500"
+                ? "border-blue-500"
-              : "border-slate-400"
+                : "border-slate-400"
-          } w-full h-full cursor-move rounded relative`}
+          } w-full h-full cursor-move rounded`}
         >
           <div
-            className="opacity-40 w-fill p-2 h-full"
+            className="w-fill p-2 h-full"
-            style={{ backgroundColor: data.color }}
+            style={{ backgroundColor: `${data.color}66` }}
-          />
+          >
-        </div>
+            <div className="flex justify-between">
-        <div className="text-color absolute top-2 left-3 select-none">
+              <div className="text-color select-none">{data.name}</div>
-          {data.name}
+              {(hovered || (areaIsSelected() && !layout.sidebar)) && (
-        </div>
+                <Popover
-        {(hovered || (areaIsSelected() && !layout.sidebar)) && (
+                  visible={areaIsSelected() && !layout.sidebar}
-          <div className="absolute top-2 right-3">
+                  onClickOutSide={onClickOutSide}
-            <Popover
+                  stopPropagation
-              visible={areaIsSelected() && !layout.sidebar}
+                  content={<EditPopoverContent data={data} />}
-              onClickOutSide={onClickOutSide}
+                  trigger="custom"
-              stopPropagation
+                  position="rightTop"
-              content={<EditPopoverContent data={data} />}
+                  showArrow
-              trigger="custom"
+                >
-              position="rightTop"
+                  <Button
-              showArrow
+                    icon={<IconEdit />}
-            >
+                    size="small"
-              <Button
+                    theme="solid"
-                icon={<IconEdit />}
+                    style={{
-                size="small"
+                      backgroundColor: "#2F68ADB3",
-                theme="solid"
+                    }}
-                style={{
+                    onClick={edit}
-                  backgroundColor: "#2f68ad",
+                  />
-                  opacity: "0.7",
+                </Popover>
-                }}
+              )}
-                onClick={edit}
+            </div>
-              />
-            </Popover>
           </div>
-        )}
+        </div>
       </foreignObject>
       {hovered && (
         <>