From 8db53a6e97cb00e1cb398db52bcfed4d897e1b13 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Mon, 13 May 2024 15:27:10 +0100
Subject: [PATCH] fix: Fix box-sizing of Layout Editor - MEED-6806 -
 Meeds-io/meeds#1966 (#60)

Prior to this change, the Layout editor wasn't displaying the right
proportions when moving applications. This is due to the inherited box
sizing which changed by the introduction of singlePageApplication.
---
 .../webapp/vue-app/layout-editor/components/LayoutEditor.vue    | 2 +-
 .../layout-editor/components/content/base/CellsDropBox.vue      | 2 +-
 .../layout-editor/components/content/base/CellsSelectionBox.vue | 2 +-
 .../components/content/common/SectionSelectionGrid.vue          | 2 +-
 .../vue-app/layout-editor/components/content/container/Cell.vue | 1 -
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue
index da77f6c34..209b0c08d 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue
@@ -23,7 +23,7 @@
     class="transparent"
     role="main"
     flat>
-    <div>
+    <div class="content-box-sizing">
       <layout-editor-toolbar
         :disable-save="!modified"
         :page="pageContext"
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsDropBox.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsDropBox.vue
index 83e1284bc..be97ba84d 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsDropBox.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsDropBox.vue
@@ -22,7 +22,7 @@
   <div
     ref="movingBox"
     :style="boxStyle"
-    class="layout-selecting-container d-flex position-absolute elevation-2 z-index-modal">
+    class="layout-selecting-container border-box-sizing d-flex position-absolute elevation-2 z-index-modal">
   </div>
 </template>
 <script>
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsSelectionBox.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsSelectionBox.vue
index fce0bc08a..c6ac1d06b 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsSelectionBox.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/base/CellsSelectionBox.vue
@@ -22,7 +22,7 @@
   <div
     v-show="multiCellsSelect"
     :style="boxStyle"
-    class="layout-selecting-container grey opacity-5 elevation-2 position-absolute z-index-modal">
+    class="layout-selecting-container border-box-sizing grey opacity-5 elevation-2 position-absolute z-index-modal">
   </div>
 </template>
 <script>
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue
index a8de787d0..eb37a25ef 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue
@@ -19,7 +19,7 @@
 
 -->
 <template>
-  <div :class="gridClass">
+  <div :class="gridClass" class="border-box-sizing pb-5">
     <layout-editor-section-selection-grid-cell
       v-for="i in length"
       :id="`grid-cell-${i}`"
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue
index 590798252..7f663f8e2 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue
@@ -27,7 +27,6 @@
     :hide-children="moving"
     :class="{
       'z-index-two': hover && !$root.drawerOpened,
-      'pb-12': movingChildren,
     }"
     :style="cssStyle"
     class="position-relative d-flex flex-column"