Fix rendering area in safari

This commit is contained in:
haecheonlee 2024-04-13 20:30:56 -04:00
parent 9faf99d9d7
commit cc32ffdd80

View File

@ -103,18 +103,15 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
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 <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}
</div>
{(hovered || (areaIsSelected() && !layout.sidebar)) && ( {(hovered || (areaIsSelected() && !layout.sidebar)) && (
<div className="absolute top-2 right-3">
<Popover <Popover
visible={areaIsSelected() && !layout.sidebar} visible={areaIsSelected() && !layout.sidebar}
onClickOutSide={onClickOutSide} onClickOutSide={onClickOutSide}
@ -129,14 +126,15 @@ export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
size="small" size="small"
theme="solid" theme="solid"
style={{ style={{
backgroundColor: "#2f68ad", backgroundColor: "#2F68ADB3",
opacity: "0.7",
}} }}
onClick={edit} onClick={edit}
/> />
</Popover> </Popover>
</div>
)} )}
</div>
</div>
</div>
</foreignObject> </foreignObject>
{hovered && ( {hovered && (
<> <>