From 6124a94d6955ef47586ea3623a37bf0211f8e7c4 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Sun, 5 Apr 2026 13:52:40 +0200
Subject: [PATCH] fix(web): make FileViewer skeleton widths deterministic

Replace Math.random() with a deterministic formula so snapshot tests
don't flake on every run.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 webui2/src/components/code/FileViewer.tsx     |  2 +-
 .../__snapshots__/FileViewer.test.tsx.snap    | 40 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/webui2/src/components/code/FileViewer.tsx b/webui2/src/components/code/FileViewer.tsx
index 4c6518990108edb08118830aa95d3a70ec766403..88317cd10d64b0d942479d89f1848c1d6c50b273 100644
--- a/webui2/src/components/code/FileViewer.tsx
+++ b/webui2/src/components/code/FileViewer.tsx
@@ -121,7 +121,7 @@ function FileViewerSkeleton() {
         </div>
         <div className="flex-1 space-y-1.5">
           {Array.from({ length: 20 }).map((_, i) => (
-            <Skeleton key={i} className="h-3.5" style={{ width: `${30 + Math.random() * 60}%` }} />
+            <Skeleton key={i} className="h-3.5" style={{ width: `${30 + ((i * 47) % 60)}%` }} />
           ))}
         </div>
       </div>
diff --git a/webui2/src/components/code/__snapshots__/FileViewer.test.tsx.snap b/webui2/src/components/code/__snapshots__/FileViewer.test.tsx.snap
index 66831c82bf6959cfc81023f4062d75e770fb0156..222be18d9d9b2f7204fc1b4706a4175e0a2fe685 100644
--- a/webui2/src/components/code/__snapshots__/FileViewer.test.tsx.snap
+++ b/webui2/src/components/code/__snapshots__/FileViewer.test.tsx.snap
@@ -261,83 +261,83 @@ exports[`FileViewer/TypeScriptFile matches snapshot 1`] = `
       >
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 71.50143759316606%;"
+          style="width: 30%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 60.6708169292491%;"
+          style="width: 77%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 73.2183590812158%;"
+          style="width: 64%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 34.976257221082484%;"
+          style="width: 51%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 61.48920656229181%;"
+          style="width: 38%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 49.69450792480475%;"
+          style="width: 85%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 54.37099249060006%;"
+          style="width: 72%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 76.59901111896043%;"
+          style="width: 59%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 44.36460693491388%;"
+          style="width: 46%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 42.028325445555126%;"
+          style="width: 33%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 37.66834389435642%;"
+          style="width: 80%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 57.91664167237783%;"
+          style="width: 67%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 46.78288981850762%;"
+          style="width: 54%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 63.98546670165045%;"
+          style="width: 41%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 75.9276300696755%;"
+          style="width: 88%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 47.38236735204427%;"
+          style="width: 75%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 77.0934909916055%;"
+          style="width: 62%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 48.844870253597435%;"
+          style="width: 49%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 43.285422031290835%;"
+          style="width: 36%;"
         />
         <div
           class="animate-pulse rounded-md bg-primary/10 h-3.5"
-          style="width: 55.99529760322575%;"
+          style="width: 83%;"
         />
       </div>
     </div>