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

packages/ui/package.json

@@ -44,6 +44,7 @@
     "@pierre/diffs": "catalog:",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/bounds": "0.1.3",
+    "@solid-primitives/media": "2.3.3",
     "@solid-primitives/resize-observer": "2.1.3",
     "@solidjs/meta": "catalog:",
     "@typescript/native-preview": "catalog:",

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