Fix z-index issue with contexts and modals (baserow#4734)

* fix: Append elements to the body instead of prepending them to ensure proper stacking order based on DOM order.

* update snapshot

Author: jonadeline

web-frontend/modules/core/mixins/moveToBody.js

@@ -64,9 +64,11 @@ export default {
       }
     } else if (this.$el) {
       // Because there is no parent we can directly move the component to the
-      // top of the body so it will be positioned over any other element.
+      // end of the body. Elements that mount later are appended after earlier
+      // ones so that they appear on top when sharing the same z-index (DOM
+      // order determines visual stacking for equal z-index values).
       const body = document.body
-      body.insertBefore(this.$el, body.firstChild)
+      body.appendChild(this.$el)
       this.fireMovedToBodyHandlers()
     }
 

web-frontend/test/unit/database/components/view/__snapshots__/viewDecoratorContext.spec.js.snap

@@ -122,6 +122,12 @@ exports[`GridViewRows component with decoration > Should show cant add decorator
       viewDecoratorType.onlyForPremium
     </div>
   </div>
+  <div
+    data-v-app=""
+    id="__nuxt"
+  >
+    <!---->
+  </div>
   <div
     class="context"
     style="top: auto; right: auto; bottom: auto; left: auto;"
@@ -231,12 +237,6 @@ exports[`GridViewRows component with decoration > Should show cant add decorator
   </div>
   <!--v-if-->
   <!--v-if-->
-  <div
-    data-v-app=""
-    id="__nuxt"
-  >
-    <!---->
-  </div>
 </body>
 `;
 
@@ -252,6 +252,12 @@ exports[`GridViewRows component with decoration > Should show unavailable decora
       viewDecoratorType.onlyForPremium
     </div>
   </div>
+  <div
+    data-v-app=""
+    id="__nuxt"
+  >
+    <!---->
+  </div>
   <div
     class="context"
     style="top: auto; right: auto; bottom: auto; left: auto;"
@@ -367,12 +373,6 @@ exports[`GridViewRows component with decoration > Should show unavailable decora
   </div>
   <!--v-if-->
   <!--v-if-->
-  <div
-    data-v-app=""
-    id="__nuxt"
-  >
-    <!---->
-  </div>
 </body>
 `;