Fix record modal not showing page

client/web/compose/src/components/Common/Grid.vue

@@ -120,15 +120,22 @@ export default {
       immediate: true,
       deep: true,
       handler (blocks) {
-        this.layout = []
-
-        // Next tick is important, otherwise it can lead to overlapping blocks
-        this.$nextTick(() => {
-          this.layout = blocks.map(({ meta, xywh: [x, y, w, h] }, i) => {
-            // To avoid collision with hidden elements
-            return meta.hidden ? { i, x: 0, y: 0, w: 0, h: 0 } : { i, x, y, w, h }
-          })
+        blocks = blocks.map(({ meta, xywh: [x, y, w, h] }, i) => {
+          // To avoid collision with hidden elements
+          return meta.hidden ? { i, x: 0, y: 0, w: 0, h: 0 } : { i, x, y, w, h }
         })
+
+        // Only use next tick if previous layout exists
+        if (this.layout.length) {
+          this.layout = []
+
+          // Next tick is important, otherwise it can lead to overlapping blocks
+          this.$nextTick(() => {
+            this.layout = blocks
+          })
+        } else {
+          this.layout = blocks
+        }
       },
     },
   },

client/web/compose/src/components/Public/Record/Modal.vue

@@ -22,7 +22,7 @@
       :page="page"
       :module="module"
       :record-i-d="recordID"
-      :show-record-modal="showModal"
+      show-record-modal
     />
 
     <template #modal-footer>
@@ -84,14 +84,14 @@ export default {
       immediate: true,
       handler (recordID, oldRecordID) {
         const { recordPageID } = this.$route.query
-        const { pageID: oldrecordPageID } = this.page || {}
+        const { pageID: oldRecordPageID } = this.page || {}
 
         if (!recordID) {
           this.showModal = false
           return
         }
 
-        if (recordPageID !== oldrecordPageID) {
+        if (recordPageID !== oldRecordPageID) {
           // If the page changed we need to clear the record pagination since its not relevant anymore
           if (this.recordPaginationUsable) {
             this.setRecordPaginationUsable(false)
@@ -116,9 +116,9 @@ export default {
           }
         }
 
-        setTimeout(() => {
+        this.$nextTick(() => {
           this.loadModal({ recordID, recordPageID })
-        }, 100)
+        })
       },
     },
   },

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="{ 'flex-column': showRecordModal }"
-    class="d-flex flex-grow-1 w-100 h-100"
+    class="d-flex flex-column flex-grow-1 w-100 h-100 overflow-auto"
   >
     <b-alert
       v-if="isDeleted"
@@ -31,6 +30,7 @@
       :record="record"
       :blocks="blocks"
       :mode="inEditing ? 'editor' : 'base'"
+      class="h-100"
       @reload="loadRecord()"
     />
 

client/web/compose/src/views/Public/Pages/View.vue

@@ -55,7 +55,6 @@
         :namespace="namespace"
         :module="module"
         :page="page"
-        class="flex-grow-1 overflow-auto d-flex flex-column"
       />
 
       <div