Repo editor with flex layout

2 files changed, 32 insertions, 18 deletions

diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 3d5e01c8ec0..d6c864cb976 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -43,15 +43,18 @@ export default {
 </script>
 
 <template>
-  <div class="repository-view tree-content-holder">
-    <repo-sidebar/><div v-if="isMini"
-    class="panel-right"
-    :class="{'edit-mode': editMode}">
-      <repo-tabs/>
-      <component
-        :is="currentBlobView"
-        class="blob-viewer-container"/>
-      <repo-file-buttons/>
+  <div class="repository-view">
+    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
+      <repo-sidebar/>
+      <div v-if="isMini"
+      class="panel-right"
+      :class="{'edit-mode': editMode}">
+        <repo-tabs/>
+        <component
+          :is="currentBlobView"
+          class="blob-viewer-container"/>
+        <repo-file-buttons/>
+      </div>
     </div>
     <repo-commit-section/>
     <popup-dialog
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index b3527fe8cd9..1f4d4698199 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -47,14 +47,26 @@
   margin: 20px;
 }
 
-.repository-view.tree-content-holder {
+.repository-view {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   color: $almost-black;
 
+  .tree-content-holder {
+    display: flex;
+    max-height: 100vh;
+    min-height: 300px;
+  }
+
+  .tree-content-holder-mini {
+    height: 100vh;
+  }
+
   .panel-right {
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     width: 80%;
+    height: 100%;
 
     .monaco-editor.vs {
       .line-numbers {
@@ -85,16 +97,17 @@
     }
 
     .blob-viewer-container {
-      height: calc(100vh - 62px);
+      flex: 1;
       overflow: auto;
     }
 
     #tabs {
+      flex-shrink: 0;
+      display: flex;
+      width: 100%;
       padding-left: 0;
       margin-bottom: 0;
-      display: flex;
       white-space: nowrap;
-      width: 100%;
       overflow-y: hidden;
       overflow-x: auto;
 
@@ -222,14 +235,12 @@
   }
 
   #sidebar {
+    flex: 1;
+    height: 100%;
 
     &.sidebar-mini {
-      display: inline-block;
-      vertical-align: top;
       width: 20%;
       border-right: 1px solid $white-normal;
-      min-height: 475px;
-      height: calc(100vh + 20px);
       overflow: auto;
     }