From 7f81876c697efd1ec999b46e0c266f2a1a342214 Mon Sep 17 00:00:00 2001
From: Mario Lubenka <mario.lubenka@googlemail.com>
Date: Wed, 20 Oct 2021 21:16:50 +0200
Subject: [PATCH 1/2] Remove swipe-bar z-index

Fixes position of swipe-bar so it does not overlay other UI components when scrolling.

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
---
 web_src/less/features/imagediff.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/less/features/imagediff.less b/web_src/less/features/imagediff.less
index f38ea98d7de17..55a67c6ec85b0 100644
--- a/web_src/less/features/imagediff.less
+++ b/web_src/less/features/imagediff.less
@@ -54,7 +54,6 @@
       }
 
       .swipe-bar {
-        z-index: 100;
         position: absolute;
         height: 100%;
         top: 0;

From 8a0fef1644d3cd582a59dd23c949634f36297a75 Mon Sep 17 00:00:00 2001
From: Mario Lubenka <mario.lubenka@googlemail.com>
Date: Wed, 20 Oct 2021 21:20:00 +0200
Subject: [PATCH 2/2] Unique names for image tabs in pull request

Define unique names for image tabs in pull requests, in order to toggle tabs correctly when multiple are displayed on one page.

Signed-off-by: Mario Lubenka <mario.lubenka@googlemail.com>
---
 templates/repo/diff/image_diff.tmpl | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 33fa8c9e2c40f..3d100ac9920ca 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -6,15 +6,15 @@
 		<div class="image-diff" data-path-before="{{$imagePathOld}}" data-path-after="{{$imagePathNew}}">
 			<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
 				<div class="new-menu-inner">
-					<a class="item active" data-tab="diff-side-by-side">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
+					<a class="item active" data-tab="diff-side-by-side-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
-					<a class="item" data-tab="diff-swipe">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
-					<a class="item" data-tab="diff-overlay">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
+					<a class="item" data-tab="diff-swipe-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.swipe"}}</a>
+					<a class="item" data-tab="diff-overlay-{{ .file.Index }}">{{.root.i18n.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
 				</div>
 			</div>
 			<div class="hide">
-				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side">
+				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{ .file.Index }}">
 					<div class="diff-side-by-side">
 						{{if .blobBase }}
 						<span class="side">
@@ -49,7 +49,7 @@
 					</div>
 				</div>
 				{{if and .blobBase .blobHead}}
-				<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe">
+				<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe-{{ .file.Index }}">
 					<div class="diff-swipe">
 						<div class="swipe-frame">
 							<span class="before-container"><img class="image-before" /></span>
@@ -63,7 +63,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay">
+				<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{ .file.Index }}">
 					<div class="diff-overlay">
 						<div class="overlay-frame">
 							<div class="ui centered">