diff --git a/frontend/src/components/Diff/Diff.tsx b/frontend/src/components/Diff/Diff.tsx
index 909ab2b86..cf045a138 100644
--- a/frontend/src/components/Diff/Diff.tsx
+++ b/frontend/src/components/Diff/Diff.tsx
@@ -9,7 +9,7 @@ import {
     useState,
 } from "react";
 
-import { FoldIcon, UnfoldIcon } from "@primer/octicons-react";
+import { FoldIcon } from "@primer/octicons-react";
 import type { EditorView } from "codemirror";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList } from "react-window";
@@ -170,28 +170,6 @@ function DiffBody({
     );
 }
 
-function CompressToggleButton({
-    enabled,
-    setEnabled,
-}: {
-    enabled: boolean;
-    setEnabled: (enabled: boolean) => void;
-}) {
-    return (
-        <button
-            className={styles.compressionToggle}
-            onClick={() => setEnabled(!enabled)}
-            title={
-                enabled
-                    ? "Do not compress streaks of matching lines"
-                    : "Compress streaks of matching lines"
-            }
-        >
-            {enabled ? <FoldIcon size={24} /> : <UnfoldIcon size={24} />}
-        </button>
-    );
-}
-
 export function scrollToLineNumber(
     editorView: RefObject<EditorView>,
     lineNumber: number,
@@ -463,7 +441,7 @@ export default function Diff({
                                 <div className={styles.spacer} />
                                 <ToggleButton
                                     label="T"
-                                    title={"Target column"}
+                                    title="Target column"
                                     enabled={columnState.base}
                                     setEnabled={(enabled) =>
                                         setColumn("base", enabled)
@@ -471,7 +449,7 @@ export default function Diff({
                                 />
                                 <ToggleButton
                                     label="C"
-                                    title={"Current column"}
+                                    title="Current column"
                                     enabled={columnState.current}
                                     setEnabled={(enabled) =>
                                         setColumn("current", enabled)
@@ -479,11 +457,16 @@ export default function Diff({
                                 />
                                 <ToggleButton
                                     label="3"
-                                    title={"3-way diff"}
+                                    title="3-way diff"
                                     enabled={threeWayDiffEnabled}
                                     setEnabled={handleSetThreeWayDiff}
                                 />
-                                <CompressToggleButton
+                                <ToggleButton
+                                    label={<FoldIcon size={16} />}
+                                    disabledLabel="Collapse streaks of "
+                                    enabledLabel="Show all "
+                                    title="matching lines"
+                                    padding="px-1 py-1"
                                     enabled={compressionEnabled}
                                     setEnabled={setCompressionEnabled}
                                 />
diff --git a/frontend/src/components/Diff/ToggleButton.tsx b/frontend/src/components/Diff/ToggleButton.tsx
index bd61dac9d..803f870aa 100644
--- a/frontend/src/components/Diff/ToggleButton.tsx
+++ b/frontend/src/components/Diff/ToggleButton.tsx
@@ -1,10 +1,14 @@
+import type { JSX } from "react";
 import clsx from "clsx";
 
 type ToggleButtonProps = {
-    label: string;
+    label: string | JSX.Element;
     enabled: boolean;
     setEnabled: (enabled: boolean) => void;
     title?: string;
+    disabledLabel?: string;
+    enabledLabel?: string;
+    padding?: string;
 };
 
 export default function ToggleButton({
@@ -12,6 +16,9 @@ export default function ToggleButton({
     enabled,
     setEnabled,
     title,
+    disabledLabel = "Show ",
+    enabledLabel = "Hide ",
+    padding = "px-2 py-1",
 }: ToggleButtonProps) {
     return (
         <button
@@ -19,9 +26,13 @@ export default function ToggleButton({
                 setEnabled(!enabled);
             }}
             aria-pressed={enabled}
-            title={`${enabled ? "Hide " : "Show "}${title}`}
+            title={
+                title
+                    ? `${enabled ? enabledLabel : disabledLabel}${title}`
+                    : undefined
+            }
             className={clsx(
-                "px-2 py-1",
+                padding,
                 "text-md",
                 "rounded-md border",
                 "transition-all duration-150",