Cleared selected components while switching the layout

frontend/src/Editor/Header/HeaderActions.jsx

@@ -14,6 +14,14 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
     }),
     shallow
   );
+
+  const clearSelectionBorder = () => {
+    const selectedElems = document.getElementsByClassName('resizer-select');
+    for (const element of selectedElems) {
+      element.classList.remove('resizer-select');
+    }
+  };
+
   return (
     <div className="editor-header-actions">
       <div style={{ borderRadius: 6 }}>
@@ -34,7 +42,10 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             type="button"
             aria-selected="true"
             tabIndex="0"
-            onClick={() => toggleCurrentLayout('desktop')}
+            onClick={() => {
+              clearSelectionBorder();
+              toggleCurrentLayout('desktop');
+            }}
             data-cy={`button-change-layout-to-desktop`}
           >
             <SolidIcon
@@ -54,7 +65,10 @@ function HeaderActions({ handleUndo, canUndo, handleRedo, canRedo }) {
             style={{ height: 20 }}
             aria-selected="false"
             tabIndex="-1"
-            onClick={() => toggleCurrentLayout('mobile')}
+            onClick={() => {
+              clearSelectionBorder();
+              toggleCurrentLayout('mobile');
+            }}
             data-cy={`button-change-layout-to-mobile`}
           >
             <SolidIcon

frontend/src/_stores/editorStore.js

@@ -56,11 +56,13 @@ export const useEditorStore = create(
         set({ showComments: !get().showComments }, false, {
           type: ACTIONS.TOGGLE_COMMENTS,
         }),
-      toggleCurrentLayout: (currentLayout) =>
+      toggleCurrentLayout: (currentLayout) => {
+        set({ selectedComponents: EMPTY_ARRAY });
         set({ currentLayout }, false, {
           type: ACTIONS.TOGGLE_CURRENT_LAYOUT,
           currentLayout,
-        }),
+        });
+      },
       setIsEditorActive: (isEditorActive) => set(() => ({ isEditorActive })),
       updateEditorState: (state) => set((prev) => ({ ...prev, ...state })),
       updateQueryConfirmationList: (queryConfirmationList) => set({ queryConfirmationList }),