authorgravatar for 46866023+GuilhermeVieiraDev@users.noreply.github.comGuilherme Vieira <46866023+GuilhermeVieiraDev@users.noreply.github.com> 2026-04-13 09:11:34+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-04-13 01:11:34-07:00
log57d7746a5d844281caae451702475d7bcf967b9d
treeed9c52eaa0ab7daa8eaf2dfd9b73e9f840b3faea
parent850c912556e5b6add7f06f7dcb9b07a2c45e935a
signature Signed by PGP key B5690EEEBB952194

fix(web): replace turn strip overlay gradients with mask-image fade (#1949)

1 files changed, 7 insertions(+), 6 deletions(-)

apps/web/src/components/DiffPanel.tsx+7-6
...@@ -429,12 +429,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -429,12 +429,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
429 const headerRow = (429 const headerRow = (
430 <>430 <>
431 <div className="relative min-w-0 flex-1 [-webkit-app-region:no-drag]">431 <div className="relative min-w-0 flex-1 [-webkit-app-region:no-drag]">
432 {canScrollTurnStripLeft && (
433 <div className="pointer-events-none absolute inset-y-0 left-8 z-10 w-7 bg-linear-to-r from-card to-transparent" />
434 )}
435 {canScrollTurnStripRight && (
436 <div className="pointer-events-none absolute inset-y-0 right-8 z-10 w-7 bg-linear-to-l from-card to-transparent" />
437 )}
438 <button432 <button
439 type="button"433 type="button"
440 className={cn(434 className={cn(
...@@ -466,6 +460,13 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -466,6 +460,13 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
466 <div460 <div
467 ref={turnStripRef}461 ref={turnStripRef}
468 className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"462 className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
463 style={
464 canScrollTurnStripLeft || canScrollTurnStripRight
465 ? {
466 maskImage: `linear-gradient(to right, ${canScrollTurnStripLeft ? "transparent 24px, black 72px" : "black"}, ${canScrollTurnStripRight ? "black calc(100% - 72px), transparent calc(100% - 24px)" : "black"})`,
467 }
468 : undefined
469 }
469 onWheel={onTurnStripWheel}470 onWheel={onTurnStripWheel}
470 >471 >
471 <button472 <button