From ecdfde123a1fa4789255bf17dd01ddf4ee5c400e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 May 2024 20:17:00 +0200
Subject: [PATCH 1/3] Use vertical layout for multiple code expander buttons

Fixes: https://github.com/go-gitea/gitea/issues/31068
---
 templates/repo/diff/blob_excerpt.tmpl    | 4 ++--
 templates/repo/diff/section_split.tmpl   | 2 +-
 templates/repo/diff/section_unified.tmpl | 2 +-
 web_src/css/review.css                   | 6 +++++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index a80abe263f8d7..f1ea7f8913a84 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -3,7 +3,7 @@
 	<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
 		{{if eq .GetType 4}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
-				<div class="tw-flex">
+				<div class="code-expander-buttons">
 				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 						{{svg "octicon-fold-down"}}
@@ -49,7 +49,7 @@
 	<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
 		{{if eq .GetType 4}}
 			<td colspan="2" class="lines-num">
-				<div class="tw-flex">
+				<div class="code-expander-buttons">
 					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 							{{svg "octicon-fold-down"}}
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 349f0c3dfcc9c..7376ae2eb753b 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -17,7 +17,7 @@
 			<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
 				{{if eq .GetType 4}}
 					<td class="lines-num lines-num-old">
-						<div class="tw-flex">
+						<div class="code-expander-buttons">
 						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 								{{svg "octicon-fold-down"}}
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index ec59f4d42e0c7..12a697be27524 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -13,7 +13,7 @@
 			{{if eq .GetType 4}}
 				{{if $.root.AfterCommitID}}
 					<td colspan="2" class="lines-num">
-						<div class="tw-flex">
+						<div class="code-expander-buttons">
 							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 									{{svg "octicon-fold-down"}}
diff --git a/web_src/css/review.css b/web_src/css/review.css
index 7534500e6fbce..911d2ac78b16d 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -202,7 +202,7 @@
 .code-expander-button {
   border: none;
   color: var(--color-text-light);
-  height: 28px;
+  height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -211,6 +211,10 @@
   flex: 1;
 }
 
+.code-expander-button:only-child {
+  height: 28px;
+}
+
 .code-expander-button:hover {
   background: var(--color-primary);
   color: var(--color-primary-contrast);

From e524579ed090aa7d83b943be1aa3c3387ecf2b56 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 May 2024 20:42:22 +0200
Subject: [PATCH 2/3] refactor to data-expand-direction

---
 templates/repo/diff/blob_excerpt.tmpl    | 18 ++++++++++--------
 templates/repo/diff/section_split.tmpl   |  9 +++++----
 templates/repo/diff/section_unified.tmpl |  9 +++++----
 web_src/css/review.css                   |  7 ++++---
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl
index f1ea7f8913a84..2874ac6a55c61 100644
--- a/templates/repo/diff/blob_excerpt.tmpl
+++ b/templates/repo/diff/blob_excerpt.tmpl
@@ -2,19 +2,20 @@
 	{{range $k, $line := $.section.Lines}}
 	<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
 		{{if eq .GetType 4}}
+			{{$expandDirection := $line.GetExpandDirection}}
 			<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
-				<div class="code-expander-buttons">
-				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+				<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+				{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 						{{svg "octicon-fold-down"}}
 					</button>
 				{{end}}
-				{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+				{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 						{{svg "octicon-fold-up"}}
 					</button>
 				{{end}}
-				{{if eq $line.GetExpandDirection 2}}
+				{{if eq $expandDirection 2}}
 					<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 						{{svg "octicon-fold"}}
 					</button>
@@ -48,19 +49,20 @@
 	{{range $k, $line := $.section.Lines}}
 	<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
 		{{if eq .GetType 4}}
+			{{$expandDirection := $line.GetExpandDirection}}
 			<td colspan="2" class="lines-num">
-				<div class="code-expander-buttons">
-					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+				<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+					{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 							{{svg "octicon-fold-down"}}
 						</button>
 					{{end}}
-					{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+					{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 							{{svg "octicon-fold-up"}}
 						</button>
 					{{end}}
-					{{if eq $line.GetExpandDirection 2}}
+					{{if eq $expandDirection 2}}
 						<button class="code-expander-button" hx-target="closest tr" hx-get="{{$.RepoLink}}/blob_excerpt/{{PathEscape $.AfterCommitID}}?data-query={{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.PageIsWiki}}&anchor={{$.Anchor}}">
 							{{svg "octicon-fold"}}
 						</button>
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl
index 7376ae2eb753b..37b42bcb376ab 100644
--- a/templates/repo/diff/section_split.tmpl
+++ b/templates/repo/diff/section_split.tmpl
@@ -16,19 +16,20 @@
 		{{if or (ne .GetType 2) (not $hasmatch)}}
 			<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
 				{{if eq .GetType 4}}
+					{{$expandDirection := $line.GetExpandDirection}}
 					<td class="lines-num lines-num-old">
-						<div class="code-expander-buttons">
-						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+						<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+						{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 								{{svg "octicon-fold-down"}}
 							</button>
 						{{end}}
-						{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+						{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 								{{svg "octicon-fold-up"}}
 							</button>
 						{{end}}
-						{{if eq $line.GetExpandDirection 2}}
+						{{if eq $expandDirection 2}}
 							<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=split&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 								{{svg "octicon-fold"}}
 							</button>
diff --git a/templates/repo/diff/section_unified.tmpl b/templates/repo/diff/section_unified.tmpl
index 12a697be27524..708b333291641 100644
--- a/templates/repo/diff/section_unified.tmpl
+++ b/templates/repo/diff/section_unified.tmpl
@@ -12,19 +12,20 @@
 		<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
 			{{if eq .GetType 4}}
 				{{if $.root.AfterCommitID}}
+					{{$expandDirection := $line.GetExpandDirection}}
 					<td colspan="2" class="lines-num">
-						<div class="code-expander-buttons">
-							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 5)}}
+						<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
+							{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 									{{svg "octicon-fold-down"}}
 								</button>
 							{{end}}
-							{{if or (eq $line.GetExpandDirection 3) (eq $line.GetExpandDirection 4)}}
+							{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 									{{svg "octicon-fold-up"}}
 								</button>
 							{{end}}
-							{{if eq $line.GetExpandDirection 2}}
+							{{if eq $expandDirection 2}}
 								<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptRepoLink}}/blob_excerpt/{{PathEscape $.root.AfterCommitID}}?{{$line.GetBlobExcerptQuery}}&style=unified&direction=&wiki={{$.root.PageIsWiki}}&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
 									{{svg "octicon-fold"}}
 								</button>
diff --git a/web_src/css/review.css b/web_src/css/review.css
index 911d2ac78b16d..09af7f9554fbb 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -202,7 +202,7 @@
 .code-expander-button {
   border: none;
   color: var(--color-text-light);
-  height: 18px;
+  height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -211,8 +211,9 @@
   flex: 1;
 }
 
-.code-expander-button:only-child {
-  height: 28px;
+/* expand direction 3 = both ways with two buttons */
+.code-expander-buttons[data-expand-direction="3"] .code-expander-button {
+  height: 18px;
 }
 
 .code-expander-button:hover {

From a2dad1df3051f9f31cb7be006fcddddc7029ea9d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 27 May 2024 20:45:57 +0200
Subject: [PATCH 3/3] Update web_src/css/review.css

---
 web_src/css/review.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/review.css b/web_src/css/review.css
index 09af7f9554fbb..c389deace8e06 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -211,7 +211,7 @@
   flex: 1;
 }
 
-/* expand direction 3 = both ways with two buttons */
+/* expand direction 3 is both ways with two buttons */
 .code-expander-buttons[data-expand-direction="3"] .code-expander-button {
   height: 18px;
 }