Fixed diff tree folders being rendered incorrectly

app/assets/javascripts/diffs/store/utils.js

 import _ from 'underscore';
 import { diffModes } from '~/ide/constants';
+import { truncatePathMiddleToLength } from '~/lib/utils/text_utility';
 import {
   LINE_POSITION_LEFT,
   LINE_POSITION_RIGHT,
@@ -306,7 +307,7 @@ export const getLowestSingleFolder = folder => {
         if (shouldGetFolder) {
           const firstFolder = getFolder(file);
 
-          path.push(firstFolder.path);
+          path.push(...firstFolder.path);
           tree.push(...firstFolder.tree);
         }
 
@@ -321,7 +322,7 @@ export const getLowestSingleFolder = folder => {
   const { path, tree } = getFolder(folder, [folder.name]);
 
   return {
-    path: path.join('/'),
+    path: truncatePathMiddleToLength(path.join('/'), 40),
     treeAcc: tree.length ? tree[tree.length - 1].tree : null,
   };
 };

app/assets/stylesheets/pages/diff.scss

@@ -1029,7 +1029,7 @@
   position: sticky;
   $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
   top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
-  max-height: calc(100vh - $top-pos);
+  max-height: calc(100vh - #{$top-pos});
   padding-right: $gl-padding;
 
   .file-row {
@@ -1040,7 +1040,7 @@
   .with-performance-bar & {
     $performance-bar-top-pos: $performance-bar-height + $top-pos;
     top: $performance-bar-top-pos;
-    max-height: calc(100vh - $performance-bar-top-pos);
+    max-height: calc(100vh - #{$performance-bar-top-pos});
   }
 }
 

spec/javascripts/diffs/store/utils_spec.js

@@ -665,6 +665,47 @@ describe('DiffsStoreUtils', () => {
             },
           ],
         },
+        {
+          type: 'tree',
+          name: 'ee',
+          tree: [
+            {
+              type: 'tree',
+              name: 'lib',
+              tree: [
+                {
+                  type: 'tree',
+                  name: 'ee',
+                  tree: [
+                    {
+                      type: 'tree',
+                      name: 'gitlab',
+                      tree: [
+                        {
+                          type: 'tree',
+                          name: 'checks',
+                          tree: [
+                            {
+                              type: 'tree',
+                              name: 'longtreenametomakepath',
+                              tree: [
+                                {
+                                  type: 'blob',
+                                  name: 'diff_check.rb',
+                                  tree: [],
+                                },
+                              ],
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
         {
           type: 'tree',
           name: 'spec',
@@ -696,6 +737,17 @@ describe('DiffsStoreUtils', () => {
             },
           ],
         },
+        {
+          type: 'tree',
+          name: 'ee/lib/…/…/…/longtreenametomakepath',
+          tree: [
+            {
+              name: 'diff_check.rb',
+              tree: [],
+              type: 'blob',
+            },
+          ],
+        },
         {
           type: 'tree',
           name: 'spec',