diff --git a/scm-ui-components/packages/ui-components/src/repos/DiffFile.js b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
index f268940709..712ad2f91b 100644
--- a/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
+++ b/scm-ui-components/packages/ui-components/src/repos/DiffFile.js
@@ -19,6 +19,12 @@ const styles = {
   panel: {
     fontSize: "1rem"
   },
+  /* remove bottom border for collapsed panels */
+  panelCollapsed: {
+    "& .panel-heading": {
+      borderBottom: "none"
+    }
+  },
   /* breaks into a second row
      when buttons and title become too long */
   level: {
@@ -107,7 +113,7 @@ class DiffFile extends React.Component<Props, State> {
 
   toggleCollapse = () => {
     const { file } = this.props;
-    if (file && !file.isBinaray) {
+    if (file && !file.isBinary) {
       this.setState(state => ({
         collapsed: !state.collapsed
       }));
@@ -275,15 +281,20 @@ class DiffFile extends React.Component<Props, State> {
         </div>
       );
     }
-    const collapseIcon = !file.isBinary ? (
-      <Icon name={icon} color="inherit" />
-    ) : null;
+    const collapseIcon =
+      file && !file.isBinary ? <Icon name={icon} color="inherit" /> : null;
 
     const fileControls = fileControlFactory
       ? fileControlFactory(file, this.setCollapse)
       : null;
     return (
-      <div className={classNames("panel", classes.panel)}>
+      <div
+        className={classNames(
+          "panel",
+          classes.panel,
+          (file && file.isBinary) || collapsed ? classes.panelCollapsed : ""
+        )}
+      >
         <div className="panel-heading">
           <div className={classNames("level", classes.level)}>
             <div