From 1254fc668a8253ac4e4f7ce5193f49a02b1340ad Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 18 Mar 2023 02:00:17 +0800
Subject: [PATCH] Fix review comment context menu clipped bug (#23523) (#23543)

Backport #23523, Close #23517

There is no "dropdown menu" for image/csv view, so we could only add the
"overflow-x: scroll" to the image/csv view.

Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
---
 templates/repo/diff/box.tmpl | 3 ++-
 web_src/css/helpers.css      | 1 +
 web_src/css/repository.css   | 4 ----
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index afd471368f..38c18b6566 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -161,7 +161,8 @@
 									{{end}}
 								</div>
 								{{if $showFileViewToggle}}
-									<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
+									{{/* for image or CSV, it can have a horizontal scroll bar, there won't be review comment context menu (position absolute) which would be clipped by "overflow" */}}
+									<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}} gt-overflow-x-scroll">
 										<table class="chroma gt-w-100">
 											{{if $isImage}}
 												{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 9e974b9ea1..1c02de2d7a 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -22,6 +22,7 @@
 /* below class names match Tailwind CSS */
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
+.gt-overflow-x-scroll { overflow-x: scroll !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;
diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index ad2ac49b99..8e3788b804 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -3337,10 +3337,6 @@ td.blob-excerpt {
   min-width: 100px;
 }
 
-.diff-file-body {
-  overflow-x: scroll;
-}
-
 .diff-stats-bar {
   display: inline-block;
   background-color: var(--color-red);