Fix rendering area in safari

src/components/EditorCanvas/Area.jsx

@@ -103,18 +103,15 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
                   selectedElement.id === data.id
                 ? "border-blue-500"
                 : "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"
-            style={{ backgroundColor: data.color }}
-          />
-        </div>
-        <div className="text-color absolute top-2 left-3 select-none">
-          {data.name}
-        </div>
+            className="w-fill p-2 h-full"
+            style={{ backgroundColor: `${data.color}66` }}
+          >
+            <div className="flex justify-between">
+              <div className="text-color select-none">{data.name}</div>
               {(hovered || (areaIsSelected() && !layout.sidebar)) && (
-          <div className="absolute top-2 right-3">
                 <Popover
                   visible={areaIsSelected() && !layout.sidebar}
                   onClickOutSide={onClickOutSide}
@@ -129,14 +126,15 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
                     size="small"
                     theme="solid"
                     style={{
-                  backgroundColor: "#2f68ad",
-                  opacity: "0.7",
+                      backgroundColor: "#2F68ADB3",
                     }}
                     onClick={edit}
                   />
                 </Popover>
-          </div>
               )}
+            </div>
+          </div>
+        </div>
       </foreignObject>
       {hovered && (
         <>