diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 02e8c36f4..df69fa183 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -13,7 +13,7 @@
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import Card from "$lib/components/ui/Card.svelte";
-	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import DiffFileTree from "$lib/components/repo/DiffFileTree.svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
 	import DiffFiles from "$lib/components/repo/DiffFiles.svelte";
@@ -245,17 +245,13 @@
 						{/if}
 					</div>
 					<div class="flex items-center gap-xs">
-						<Button
-							icon={allOpen ? FoldVertical : UnfoldVertical}
-							title={allOpen ? "Collapse lines" : "Expand lines"}
-							onclick={() => setAllOpen(!allOpen)}
-							variant="ghost"
+						<Toggle
+							bind:checked={wrap}
 							size="small"
+							class="px-xs text-foreground-muted"
 						>
-							<span class="hidden @min-[42rem]/toolbar:inline"
-								>{allOpen ? "Collapse" : "Expand"}</span
-							>
-						</Button>
+							Wrap
+						</Toggle>
 						{#if downloadUrls}
 							<Dropdown
 								variant="button"
@@ -286,9 +282,17 @@
 								>
 							</Dropdown>
 						{/if}
-						<Checkbox bind:checked={wrap} class="px-xs text-foreground-muted">
-							Wrap
-						</Checkbox>
+						<Button
+							icon={allOpen ? FoldVertical : UnfoldVertical}
+							title={allOpen ? "Collapse lines" : "Expand lines"}
+							onclick={() => setAllOpen(!allOpen)}
+							variant="ghost"
+							size="small"
+						>
+							<span class="hidden @min-[42rem]/toolbar:inline"
+								>{allOpen ? "Collapse" : "Expand"}</span
+							>
+						</Button>
 						<ButtonGroup>
 							{#each ["unified", "split"] as const as style (style)}
 								<Button
diff --git a/web/src/lib/components/ui/Toggle.stories.svelte b/web/src/lib/components/ui/Toggle.stories.svelte
index e9da46b64..d6bbfcf33 100644
--- a/web/src/lib/components/ui/Toggle.stories.svelte
+++ b/web/src/lib/components/ui/Toggle.stories.svelte
@@ -9,12 +9,14 @@
 		argTypes: {
 			checked: { control: "boolean" },
 			disabled: { control: "boolean" },
-			layout: { control: "inline-radio", options: ["inline", "block"] }
+			layout: { control: "inline-radio", options: ["inline", "block"] },
+			size: { control: "inline-radio", options: ["small", "regular"] }
 		},
 		args: {
 			checked: false,
 			disabled: false,
-			layout: "inline"
+			layout: "inline",
+			size: "regular"
 		}
 	});
 </script>
@@ -41,3 +43,10 @@
 		<Toggle layout="block" checked>Another one, wrapping when the text runs long</Toggle>
 	</div>
 </Story>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-sm">
+		<Toggle size="small">Small</Toggle>
+		<Toggle size="regular">Regular</Toggle>
+	</div>
+</Story>
diff --git a/web/src/lib/components/ui/Toggle.svelte b/web/src/lib/components/ui/Toggle.svelte
index 03bec1063..06e30eb44 100644
--- a/web/src/lib/components/ui/Toggle.svelte
+++ b/web/src/lib/components/ui/Toggle.svelte
@@ -25,13 +25,18 @@
 				inline: { label: "inline-flex", text: "whitespace-nowrap" },
 				block: { label: "flex w-full", text: "min-w-0 flex-1" }
 			},
+			size: {
+				small: { label: "min-h-7 typography-paragraph-small" },
+				regular: { label: "" }
+			},
 			disabled: {
 				true: { label: "cursor-not-allowed text-foreground-disabled" },
 				false: { label: "cursor-pointer" }
 			}
 		},
 		defaultVariants: {
-			layout: "inline"
+			layout: "inline",
+			size: "regular"
 		}
 	});
 
@@ -39,6 +44,7 @@
 		checked?: boolean;
 		disabled?: boolean;
 		layout?: "inline" | "block";
+		size?: "small" | "regular";
 		class?: string;
 		children?: Snippet;
 	}
@@ -47,12 +53,13 @@
 		checked = $bindable(false),
 		disabled = false,
 		layout = "inline",
+		size = "regular",
 		class: className,
 		children,
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(toggle({ layout, disabled }));
+	const classes = $derived(toggle({ layout, size, disabled }));
 </script>
 
 <label class={classes.label({ class: className })}>