Fix design view overlay positioning

The div wrapping gl-alert was causing the
<image> to be pushed down the page, thus
causing the overlay to appear "above" where it was
meant to be.

This pulls GLAlert out of the div that wraps
design-image and design-overlay so as to not
interfere with any positioning

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -238,12 +238,14 @@ export default {
             />
           </template>
         </design-destroyer>
+
+        <div v-if="errorMessage" class="p-3">
+          <gl-alert variant="danger" @dismiss="errorMessage = null">
+            {{ errorMessage }}
+          </gl-alert>
+        </div>
+
         <div class="d-flex flex-column h-100 mh-100 position-relative">
-          <div class="p-3">
-            <gl-alert v-if="errorMessage" variant="danger" @dismiss="errorMessage = null">
-              {{ errorMessage }}
-            </gl-alert>
-          </div>
           <design-image
             :image="design.image"
             :name="design.filename"

ee/changelogs/unreleased/fix-design-overlay-positioning.yml

+---
+title: fix positioning of design overlay pins when viewing design
+merge_request:
+author:
+type: fixed

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -13,15 +13,11 @@ exports[`Design management design index page renders design index 1`] = `
       projectpath=""
     />
      
+    <!---->
+     
     <div
       class="d-flex flex-column h-100 mh-100 position-relative"
     >
-      <div
-        class="p-3"
-      >
-        <!---->
-      </div>
-       
       <design-image-stub
         image="test.jpg"
         name="test.jpg"
@@ -96,27 +92,27 @@ exports[`Design management design index page with error GlAlert is rendered in c
     />
      
     <div
-      class="d-flex flex-column h-100 mh-100 position-relative"
+      class="p-3"
     >
-      <div
-        class="p-3"
+      <gl-alert-stub
+        dismissible="true"
+        dismisslabel="Dismiss"
+        primarybuttonlink=""
+        primarybuttontext=""
+        secondarybuttonlink=""
+        secondarybuttontext=""
+        title=""
+        variant="danger"
       >
-        <gl-alert-stub
-          dismissible="true"
-          dismisslabel="Dismiss"
-          primarybuttonlink=""
-          primarybuttontext=""
-          secondarybuttonlink=""
-          secondarybuttontext=""
-          title=""
-          variant="danger"
-        >
-          
-            woops
-          
-        </gl-alert-stub>
-      </div>
-       
+        
+          woops
+        
+      </gl-alert-stub>
+    </div>
+     
+    <div
+      class="d-flex flex-column h-100 mh-100 position-relative"
+    >
       <design-image-stub
         image="test.jpg"
         name="test.jpg"