Merge branch '46591-fix-ide-height-issues' into 'master'

Resolve "Persistent banner creates problem for web ide"

Closes #46591

See merge request gitlab-org/gitlab-ce!21283

app/assets/javascripts/flash.js

@@ -10,6 +10,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
+    window.dispatchEvent(new Event('resize'));
     if (document.body.classList.contains('flash-shown')) document.body.classList.remove('flash-shown');
   }, {
     once: true,

app/assets/javascripts/ide/components/ide.vue

@@ -78,13 +78,13 @@ export default {
 </script>
 
 <template>
-  <article class="ide">
+  <article class="ide position-relative d-flex flex-column align-items-stretch">
     <error-message
       v-if="errorMessage"
       :message="errorMessage"
     />
     <div
-      class="ide-view"
+      class="ide-view flex-grow d-flex"
     >
       <find-file
         v-show="fileFindVisible"

app/assets/stylesheets/framework/layout.scss

@@ -111,3 +111,42 @@ body {
 .with-performance-bar .layout-page {
   margin-top: $header-height + $performance-bar-height;
 }
+
+.fullscreen-layout {
+  padding-top: 0;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+
+  > #js-peek,
+  > .navbar-gitlab {
+    position: static;
+    top: auto;
+  }
+
+  .flash-container {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .alert-wrapper .flash-container .flash-alert:last-child,
+  .alert-wrapper .flash-container .flash-notice:last-child {
+    margin-bottom: 0;
+  }
+
+  .content-wrapper {
+    margin-top: 0;
+    padding-bottom: 0;
+    flex: 1;
+    min-height: 0;
+  }
+
+  &.flash-shown {
+    .content-wrapper {
+      margin-top: 0;
+    }
+  }
+}

app/assets/stylesheets/page_bundles/ide.scss

@@ -28,11 +28,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide-view {
   position: relative;
-  display: flex;
-  height: calc(100vh - #{$header-height});
   margin-top: 0;
   padding-bottom: $ide-statusbar-height;
   color: $gl-text-color;
+  min-height: 0; // firefox fix
 
   &.is-collapsed {
     .ide-file-list {
@@ -50,7 +49,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   display: flex;
   flex-direction: column;
   flex: 1;
-  min-height: 0;
+  min-height: 0; // firefox fix
 
   .file {
     height: 32px;
@@ -357,7 +356,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .multi-file-editor-holder {
   height: 100%;
-  min-height: 0;
+  min-height: 0; // firefox fix
 
   &.is-readonly,
   .editor.original {
@@ -546,7 +545,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
     border-left: 1px solid $white-dark;
     border-top: 1px solid $white-dark;
     border-top-left-radius: $border-radius-small;
-    min-height: 0;
+    min-height: 0; // firefox fix
   }
 }
 
@@ -758,7 +757,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide-loading {
   display: flex;
-  height: 100vh;
+  height: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -772,60 +771,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .ide {
   overflow: hidden;
-
-  &.nav-only {
-    padding-top: $header-height;
-
-    .with-performance-bar & {
-      padding-top: $header-height + $performance-bar-height;
-    }
-
-    .flash-container {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .alert-wrapper .flash-container .flash-alert:last-child,
-    .alert-wrapper .flash-container .flash-notice:last-child {
-      margin-bottom: 0;
-    }
-
-    .content-wrapper {
-      margin-top: 0;
-      padding-bottom: 0;
-    }
-
-    &.flash-shown {
-      .content-wrapper {
-        margin-top: 0;
-      }
-
-      .ide-view {
-        height: calc(100vh - #{$header-height + $flash-height});
-      }
-    }
-  }
-}
-
-.with-performance-bar .ide.nav-only {
-  .flash-container {
-    margin-top: 0;
-  }
-
-  .content-wrapper {
-    margin-top: 0;
-    padding-bottom: 0;
-  }
-
-  .ide-view {
-    height: calc(100vh - #{$header-height + $performance-bar-height});
-  }
-
-  &.flash-shown {
-    .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
-    }
-  }
+  flex: 1;
 }
 
 .drag-handle {
@@ -1209,7 +1155,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-context-body {
-  min-height: 0;
+  min-height: 0; // firefox fix
 }
 
 .ide-sidebar-project-title {

app/controllers/ide_controller.rb

 class IdeController < ApplicationController
-  layout 'nav_only'
+  layout 'fullscreen'
 
   def index
   end

app/views/ide/index.html.haml

-- @body_class = 'ide'
+- @body_class = 'ide-layout'
 - page_title 'IDE'
 
 - content_for :page_specific_javascripts do

app/views/layouts/nav_only.html.haml → app/views/layouts/fullscreen.html.haml

 !!! 5
 %html{ lang: I18n.locale, class: page_class }
   = render "layouts/head"
-  %body{ class: "#{user_application_theme} #{@body_class} nav-only", data: { page: body_data_page } }
+  %body{ class: "#{user_application_theme} #{@body_class} fullscreen-layout", data: { page: body_data_page } }
     = render 'peek/bar'
     = render "layouts/header/default"
     = render 'shared/outdated_browser'
@@ -10,5 +10,5 @@
       = render "layouts/broadcast"
       = yield :flash_message
       = render "layouts/flash"
-    .content{ id: "content-body" }
+    .content-wrapper{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
       = yield

changelogs/unreleased/46591-fix-ide-height-issues.yml

+---
+title: Fix IDE issues with persistent banners
+merge_request: 21283
+author:
+type: fixed