fix: layout control not working (#7502)

* fixed layout control problem.

* removed extra padding for multi pointer canvas

app/client/src/pages/Editor/MainContainerLayoutControl.tsx

@@ -55,9 +55,7 @@ const AppsmithLayouts: AppsmithLayoutConfigOption[] = [
 ];
 
 const LayoutControlWrapper = styled.div`
-  position: absolute;
-  height: ${(props) => props.theme.spaces[15]}px;
-  width: 100%;
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;

app/client/src/pages/Editor/WidgetsEditor.tsx

@@ -161,10 +161,10 @@ function WidgetsEditor() {
           onClick={handleWrapperClick}
           onDragStart={onDragStart}
         >
+          <MainContainerLayoutControl />
           <CanvasContainer className={getCanvasClassName()} key={currentPageId}>
             {node}
           </CanvasContainer>
-          <MainContainerLayoutControl />
           <Debugger />
           <CrudInfoModal />
         </EditorWrapper>

app/client/src/pages/common/ArtBoard.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 export default styled.div<{ width: number }>`
   width: ${(props) => props.width}px;
-  margin: ${(props) => props.theme.spaces[15]}px auto 0;
+  margin: 0 auto;
   position: relative;
   background: ${(props) => {
     return props.theme.colors.artboard;

app/client/src/pages/common/CanvasMultiPointerArena.tsx

@@ -27,7 +27,7 @@ const Canvas = styled.canvas`
   position: absolute;
   top: 0;
   left: 0;
-  height: calc(100% + ${(props) => props.theme.canvasBottomPadding}px);
+  height: 100%;
   width: 100%;
   overflow-y: auto;
   z-index: 1;