1 files changed, 39 insertions, 29 deletions

diff --git a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
index 7e79572f76d..c5f6f736626 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/components/app.vue
@@ -10,6 +10,7 @@ import SignInPage from '../pages/sign_in/sign_in_page.vue';
 import SubscriptionsPage from '../pages/subscriptions_page.vue';
 import UserLink from './user_link.vue';
 import BrowserSupportAlert from './browser_support_alert.vue';
+import FeedbackBanner from './feedback_banner.vue';
 
 export default {
   name: 'JiraConnectApp',
@@ -18,6 +19,7 @@ export default {
     GlLink,
     GlSprintf,
     BrowserSupportAlert,
+    FeedbackBanner,
     SignInPage,
     SubscriptionsPage,
     UserLink,
@@ -103,39 +105,47 @@ export default {
       <user-link v-if="userSignedIn" :user="currentUser" class="gl-fixed gl-right-4" />
     </header>
 
-    <main class="jira-connect-app gl-px-5 gl-pt-7 gl-mx-auto">
-      <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" />
-      <div v-else data-testid="jira-connect-app">
-        <gl-alert
-          v-if="shouldShowAlert"
-          :variant="alert.variant"
-          :title="alert.title"
-          class="gl-mb-5"
-          data-testid="jira-connect-persisted-alert"
-          @dismiss="setAlert"
-        >
-          <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
-            <template #link="{ content }">
-              <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link>
-            </template>
-          </gl-sprintf>
+    <main
+      class="jira-connect-app gl-px-5 gl-pt-7 gl-pb-7 gl-mx-auto gl-display-flex gl-flex-direction-column gl-gap-7"
+    >
+      <div class="gl-flex-grow-1">
+        <browser-support-alert v-if="!isBrowserSupported" class="gl-mb-7" />
+        <div v-else data-testid="jira-connect-app">
+          <gl-alert
+            v-if="shouldShowAlert"
+            :variant="alert.variant"
+            :title="alert.title"
+            class="gl-mb-5"
+            data-testid="jira-connect-persisted-alert"
+            @dismiss="setAlert"
+          >
+            <gl-sprintf v-if="alert.linkUrl" :message="alert.message">
+              <template #link="{ content }">
+                <gl-link :href="alert.linkUrl" target="_blank">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
 
-          <template v-else>
-            {{ alert.message }}
-          </template>
-        </gl-alert>
+            <template v-else>
+              {{ alert.message }}
+            </template>
+          </gl-alert>
 
-        <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7">
-          <sign-in-page
-            v-show="!userSignedIn"
-            :has-subscriptions="hasSubscriptions"
-            :public-key-storage-enabled="publicKeyStorageEnabled"
-            @sign-in-oauth="onSignInOauth"
-            @error="onSignInError"
-          />
-          <subscriptions-page v-if="userSignedIn" :has-subscriptions="hasSubscriptions" />
+          <div class="gl-layout-w-limited gl-mx-auto gl-px-5 gl-mb-7">
+            <sign-in-page
+              v-show="!userSignedIn"
+              :has-subscriptions="hasSubscriptions"
+              :public-key-storage-enabled="publicKeyStorageEnabled"
+              @sign-in-oauth="onSignInOauth"
+              @error="onSignInError"
+            />
+            <subscriptions-page v-if="userSignedIn" :has-subscriptions="hasSubscriptions" />
+          </div>
         </div>
       </div>
+
+      <div class="gl-flex-grow-2">
+        <feedback-banner class="gl-max-w-80 gl-mx-auto" />
+      </div>
     </main>
   </div>
 </template>