diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 819d1a4558..bd54486f36 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -728,35 +728,6 @@ Array [
             add
           </span>
         </div>
-        <div
-          className="sc-jTzLTM ljPywG level-right is-flex"
-        >
-          <div
-            className="field is-grouped"
-          >
-            <div
-              className="control"
-            >
-              <button
-                className="button is-default is-reduced-mobile"
-                onClick={[Function]}
-                type="button"
-              >
-                <span
-                  className="icon is-medium"
-                >
-                  <i
-                    className="fas fa-columns has-text-inherit"
-                  />
-                </span>
-                <span>
-                  diff.sideBySide
-                   
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 7272febede..49da9b2484 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -271,8 +271,22 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
-
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
+    const sideBySideToggle =
+      file.hunks && file.hunks.length > 0 ? (
+        <ButtonWrapper className={classNames("level-right", "is-flex")}>
+          <ButtonGroup>
+            <Button
+              action={this.toggleSideBySide}
+              icon={sideBySide ? "align-left" : "columns"}
+              label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+              reducedMobile={true}
+            />
+            {fileControls}
+          </ButtonGroup>
+        </ButtonWrapper>
+      ) : null;
+
     return (
       <DiffFilePanel className={classNames("panel", "is-size-6")} collapsed={(file && file.isBinary) || collapsed}>
         <div className="panel-heading">
@@ -288,17 +302,7 @@ class DiffFile extends React.Component<Props, State> {
               </TitleWrapper>
               {this.renderChangeTag(file)}
             </FullWidthTitleHeader>
-            <ButtonWrapper className={classNames("level-right", "is-flex")}>
-              <ButtonGroup>
-                <Button
-                  action={this.toggleSideBySide}
-                  icon={sideBySide ? "align-left" : "columns"}
-                  label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  reducedMobile={true}
-                />
-                {fileControls}
-              </ButtonGroup>
-            </ButtonWrapper>
+            {sideBySideToggle}
           </FlexWrapLevel>
         </div>
         {body}