Change ToggleGroup to single Toggle for diff line wrapping

tyler-builds · tyler-builds · commit 87fad1ee42b8 · 2026-03-20T17:31:05.000-05:00
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
@@ -517,24 +517,18 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
           <Columns2Icon className="size-3" />
         </Toggle>
       </ToggleGroup>
-      <ToggleGroup
+      <Toggle
         className="shrink-0 [-webkit-app-region:no-drag]"
         variant="outline"
         size="xs"
-        value={[diffOverflowMode]}
-        onValueChange={(value) => {
-          const next = value[0];
-          if (next === "wrap") {
-            setDiffOverflowMode("wrap");
-          } else {
-            setDiffOverflowMode("scroll");
-          }
+        aria-label="Toggle line wrapping"
+        pressed={diffOverflowMode === "wrap"}
+        onPressedChange={(pressed) => {
+          setDiffOverflowMode(pressed ? "wrap" : "scroll");
         }}
       >
-        <Toggle aria-label="Toggle line wrapping" value="wrap">
-          <WrapTextIcon className="size-3" />
-        </Toggle>
-      </ToggleGroup>
+        <WrapTextIcon className="size-3" />
+      </Toggle>
     </>
   );
 
