fix(app): hide line numbers in diffs on mobile

1 files changed, 14 insertions, 4 deletions

diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 7620f2bb5..33925592c 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -1,5 +1,6 @@
 import { checksum } from "@opencode-ai/util/encode"
 import { FileDiff } from "@pierre/diffs"
+import { createMediaQuery } from "@solid-primitives/media"
 import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
 import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
 import { getWorkerPool } from "../pierre/worker"
@@ -8,10 +9,19 @@ export function Diff<T>(props: DiffProps<T>) {
   let container!: HTMLDivElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
 
-  const options = createMemo(() => ({
-    ...createDefaultOptions(props.diffStyle),
-    ...others,
-  }))
+  const mobile = createMediaQuery("(max-width: 640px)")
+
+  const options = createMemo(() => {
+    const opts = {
+      ...createDefaultOptions(props.diffStyle),
+      ...others,
+    }
+    if (!mobile()) return opts
+    return {
+      ...opts,
+      disableLineNumbers: true,
+    }
+  })
 
   let instance: FileDiff<T> | undefined