diff --git a/src/components/profile/group-item.tsx b/src/components/profile/group-item.tsx index 79d67f6..cda55bb 100644 --- a/src/components/profile/group-item.tsx +++ b/src/components/profile/group-item.tsx @@ -22,7 +22,14 @@ export const GroupItem = (props: Props) => { let { type, group, onDelete } = props; const sortable = type === "prepend" || type === "append"; - const { attributes, listeners, setNodeRef, transform, transition } = sortable + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = sortable ? useSortable({ id: group.name }) : { attributes: {}, @@ -30,6 +37,7 @@ export const GroupItem = (props: Props) => { setNodeRef: null, transform: null, transition: null, + isDragging: false, }; const [iconCachePath, setIconCachePath] = useState(""); @@ -55,6 +63,7 @@ export const GroupItem = (props: Props) => { ({ + position: "relative", background: type === "original" ? palette.mode === "dark" @@ -68,6 +77,7 @@ export const GroupItem = (props: Props) => { borderRadius: "8px", transform: CSS.Transform.toString(transform), transition, + zIndex: isDragging ? "calc(infinity)" : undefined, })} > {group.icon && group.icon?.trim().startsWith("http") && ( diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx index 54a45ec..8442bdc 100644 --- a/src/components/profile/profile-item.tsx +++ b/src/components/profile/profile-item.tsx @@ -51,8 +51,14 @@ interface Props { export const ProfileItem = (props: Props) => { const { selected, activating, itemData, onSelect, onEdit, onSave, onDelete } = props; - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id: props.id }); + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: props.id }); const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); @@ -300,8 +306,10 @@ export const ProfileItem = (props: Props) => { return ( { let { type, proxy, onDelete } = props; const sortable = type === "prepend" || type === "append"; - const { attributes, listeners, setNodeRef, transform, transition } = sortable + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = sortable ? useSortable({ id: proxy.name }) : { attributes: {}, @@ -28,12 +35,14 @@ export const ProxyItem = (props: Props) => { setNodeRef: null, transform: null, transition: null, + isDragging: false, }; return ( ({ + position: "relative", background: type === "original" ? palette.mode === "dark" @@ -47,6 +56,7 @@ export const ProxyItem = (props: Props) => { borderRadius: "8px", transform: CSS.Transform.toString(transform), transition, + zIndex: isDragging ? "calc(infinity)" : undefined, })} > { const proxyPolicy = rule.match(/[^,]+$/)?.[0] ?? ""; const ruleContent = rule.slice(ruleType.length + 1, -proxyPolicy.length - 1); - const { attributes, listeners, setNodeRef, transform, transition } = sortable + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = sortable ? useSortable({ id: ruleRaw }) : { attributes: {}, @@ -32,11 +39,13 @@ export const RuleItem = (props: Props) => { setNodeRef: null, transform: null, transition: null, + isDragging: false, }; return ( ({ + position: "relative", background: type === "original" ? palette.mode === "dark" @@ -50,6 +59,7 @@ export const RuleItem = (props: Props) => { borderRadius: "8px", transform: CSS.Transform.toString(transform), transition, + zIndex: isDragging ? "calc(infinity)" : undefined, })} > { const { itemData, onEdit, onDelete: onDeleteItem } = props; - const { attributes, listeners, setNodeRef, transform, transition } = - useSortable({ id: props.id }); + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ id: props.id }); const { t } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); @@ -99,8 +105,10 @@ export const TestItem = (props: Props) => { return (