Ensure minimum container height for displaying changed files

Author: kgryte

src/components/FileList.tsx

@@ -5,6 +5,7 @@ import { Menu } from '@phosphor/widgets';
 import * as React from 'react';
 import { GitExtension } from '../model';
 import {
+  fileListWrapperClass,
   moveFileDownButtonSelectedStyle,
   moveFileDownButtonStyle,
   moveFileUpButtonSelectedStyle,
@@ -482,7 +483,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
 
     if (this.props.settings.composite['simpleStaging']) {
       return (
-        <div>
+        <div className={fileListWrapperClass}>
           <div>
             <GitStageSimple
               heading={'Changed'}
@@ -495,16 +496,18 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
           </div>
         </div>
       );
-    } else {
-      return (
-        <div onContextMenu={event => event.preventDefault()}>
-          <div>
-            <Staged />
-            <Changed />
-            <Untracked />
-          </div>
-        </div>
-      );
     }
+    return (
+      <div
+        className={fileListWrapperClass}
+        onContextMenu={event => event.preventDefault()}
+      >
+        <div>
+          <Staged />
+          <Changed />
+          <Untracked />
+        </div>
+      </div>
+    );
   }
 }

src/style/FileListStyle.ts

@@ -1,5 +1,10 @@
 import { style } from 'typestyle';
 
+export const fileListWrapperClass = style({
+  height: 'auto',
+  paddingBottom: '40px'
+});
+
 export const moveFileUpButtonStyle = style({
   backgroundImage: 'var(--jp-icon-move-file-up)'
 });