Fr/anchored subgrid indicator (#4303)

* fix(frontend): fix anchored indicator for subgrids

* fix(frontend): fix anchored indicator for subgrids

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -108,6 +108,7 @@
 					selectedIds={$selectedComponent}
 					let:dataItem
 					let:hidden
+					let:overlapped
 					cols={columnConfiguration}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
@@ -125,6 +126,7 @@
 						<GridEditorMenu id={dataItem.id}>
 							<Component
 								{hidden}
+								{overlapped}
 								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 								render={visible}
 								component={dataItem.data}

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -94,12 +94,12 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const editorContext = getContext<AppEditorContext>('AppEditorContext')
+	const componentActive = editorContext?.componentActive
+
 	const movingcomponents = editorContext?.movingcomponents
 	$: ismoving =
 		movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id)
 
-	const componentActive = editorContext?.componentActive
-
 	let initializing: boolean | undefined = undefined
 	let errorHandledByComponent: boolean = false
 	let componentContainerHeight: number = 0
@@ -139,7 +139,7 @@
 		hidden && $mode === 'preview' ? 'hidden' : ''
 	)}
 >
-	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id}
+	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id && overlapped}
 		<div
 			class={twMerge(
 				'absolute inset-0 bg-locked center-center flex-col z-50',

frontend/src/lib/components/apps/svelte-grid/utils/item.ts

@@ -136,7 +136,7 @@ export function moveItem(active, items, cols) {
 	if (fixed) {
 		return {
 			items: items,
-			overlap: true
+			overlap: closeBlocks.length > 0
 		}
 	}