From f5d1f8f0f7a7c3cc46bb05bb2740563aa9ce553c Mon Sep 17 00:00:00 2001
From: Guilherme Vieira <guilhermevieira@ua.pt>
Date: Sun, 12 Apr 2026 05:38:08 +0100
Subject: [PATCH 1/2] fix(web): replace turn strip overlay gradients with
 mask-image fade

---
 apps/web/src/components/DiffPanel.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 63a5231f73b..6caafa67fca 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -429,12 +429,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   const headerRow = (
     <>
       <div className="relative min-w-0 flex-1 [-webkit-app-region:no-drag]">
-        {canScrollTurnStripLeft && (
-          <div className="pointer-events-none absolute inset-y-0 left-8 z-10 w-7 bg-linear-to-r from-card to-transparent" />
-        )}
-        {canScrollTurnStripRight && (
-          <div className="pointer-events-none absolute inset-y-0 right-8 z-10 w-7 bg-linear-to-l from-card to-transparent" />
-        )}
         <button
           type="button"
           className={cn(
@@ -466,6 +460,13 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
         <div
           ref={turnStripRef}
           className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
+          style={
+            canScrollTurnStripLeft || canScrollTurnStripRight
+              ? {
+                  maskImage: `linear-gradient(to right, ${canScrollTurnStripLeft ? "transparent, black 32px" : "black"}, ${canScrollTurnStripRight ? "black calc(100% - 32px), transparent" : "black"})`,
+                }
+              : undefined
+          }
           onWheel={onTurnStripWheel}
         >
           <button

From 4b13088a5cc3160c1e8706c949e57a648a227fea Mon Sep 17 00:00:00 2001
From: Guilherme Vieira <guilhermevieira@ua.pt>
Date: Sun, 12 Apr 2026 15:34:02 +0100
Subject: [PATCH 2/2] fix(web): adjust turn strip mask fade

---
 apps/web/src/components/DiffPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 6caafa67fca..e6dbb57cc7d 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -463,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
           style={
             canScrollTurnStripLeft || canScrollTurnStripRight
               ? {
-                  maskImage: `linear-gradient(to right, ${canScrollTurnStripLeft ? "transparent, black 32px" : "black"}, ${canScrollTurnStripRight ? "black calc(100% - 32px), transparent" : "black"})`,
+                  maskImage: `linear-gradient(to right, ${canScrollTurnStripLeft ? "transparent 24px, black 72px" : "black"}, ${canScrollTurnStripRight ? "black calc(100% - 72px), transparent calc(100% - 24px)" : "black"})`,
                 }
               : undefined
           }