Fix display of Commit Errors

6 files changed, 46 insertions, 12 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 44deab9288e..c48d5ee9f3d 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -10,6 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
+    document.body.classList.remove('flash-shown');
   }, {
     once: true,
     passive: true,
@@ -86,6 +87,8 @@ const createFlash = function createFlash(
 
   flashContainer.style.display = 'block';
 
+  document.body.classList.add('flash-shown');
+
   return flashContainer;
 };
 
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 5279417a72a..60661018b23 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -34,6 +34,9 @@ export default {
     commitButtonDisabled() {
       return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length;
     },
+    disabledBtnClass() {
+      return `btn btn-default btn-sm append-right-10 prepend-left-10 ${this.submitCommitsLoading ? ' disabled':''}`;
+    },
     commitMessageCount() {
       return this.commitMessage.length;
     },
@@ -152,7 +155,7 @@ you started editing. Would you like to create a new branch?`)"
         <button
           type="submit"
           :disabled="commitButtonDisabled"
-          class="btn btn-default btn-sm append-right-10 prepend-left-10"
+          :class="disabledBtnClass"
         >
           <i
             v-if="submitCommitsLoading"
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 335882bb6d7..e28b202fb91 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -111,6 +111,7 @@ export const commitChanges = (
         } additions, ${data.stats.deletions} deletions.`,
         'notice',
       );
+      window.dispatchEvent(new Event('resize'));
 
       if (newMr) {
         dispatch(
@@ -139,7 +140,10 @@ export const commitChanges = (
         window.scrollTo(0, 0);
       }
     })
-    .catch(() => flash('Error committing changes. Please try again.'));
+    .catch(() => {
+      flash('Error committing changes. Please try again.');
+      window.dispatchEvent(new Event('resize'));
+    });
 
 export const createTempEntry = (
   { state, dispatch },
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index acbd9936706..6b88394b1c4 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -496,19 +496,43 @@ table.table tr td.multi-file-table-name {
   }
 }
 
-.ide-flash-container.flash-container {
-  margin-top: $header-height;
-  margin-bottom: 0;
+.ide.nav-only {
+  .flash-container {
+    margin-top: $header-height;
+    margin-bottom: 0;
+  }
+
+  .alert-wrapper .flash-container .flash-alert:last-child {
+    margin-bottom: 0;
+  }
+
+  .content {
+    margin-top: $header-height;
+  }
 }
 
-.with-performance-bar {
-  .ide-flash-container.flash-container {
-    margin-top: $header-height + $performance-bar-height;
+.with-performance-bar .ide.nav-only {
+  .flash-container {
+    margin-top: #{$header-height + $performance-bar-height};
+  }
+
+  .content {
+    margin-top: #{$header-height + $performance-bar-height};
   }
 
   .ide-view {
     height: calc(100vh - #{$header-height + $performance-bar-height});
   }
+
+  &.flash-shown {
+    .content {
+      margin-top: 0;
+    }
+
+    .ide-view {
+      height: calc(100vh - #{$header-height + $performance-bar-height + 52});
+    }
+  }
 }
 
 
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
index cb413f197de..2acd94f8cb3 100644
--- a/app/views/ide/index.html.haml
+++ b/app/views/ide/index.html.haml
@@ -1,11 +1,10 @@
+- @body_class = 'ide'
 - page_title 'IDE'
 
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'common_vue'
   = webpack_bundle_tag 'ide'
 
-.ide-flash-container.flash-container
-
 #ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg')} }
   .text-center
     = icon('spinner spin 2x')
diff --git a/app/views/layouts/nav_only.html.haml b/app/views/layouts/nav_only.html.haml
index 6fa4b39dc10..0811211f7b2 100644
--- a/app/views/layouts/nav_only.html.haml
+++ b/app/views/layouts/nav_only.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
-  %body{ class: "#{user_application_theme} #{@body_class}", data: { page: body_data_page } }
+  %body{ class: "#{user_application_theme} #{@body_class} nav-only", data: { page: body_data_page } }
     = render 'peek/bar'
     = render "layouts/header/default"
     = render 'shared/outdated_browser'
@@ -10,4 +10,5 @@
       = render "layouts/broadcast"
       = yield :flash_message
       = render "layouts/flash"
-    = yield
+    .content{ id: "content-body" }
+      = yield