From f5a98b0f5ba4416ecefb2baa488fd00557c516cb Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Sat, 18 Mar 2023 20:29:16 -0400
Subject: [PATCH] Fix sticky header in diff view (#23554) (#23568)

Backport #23554 by @silverwind

Ressurection of #23549.

Fix regression
https://github.com/go-gitea/gitea/pull/23513#issuecomment-1474356817
from #23271.
The previous sticky CSS did assume the content is always 2 rows, but
since that PR, it's single-row above 993px width.
Adjust the sticky offset to match and add a small tweak that hides
content behind the `border-radius`.

Single row:
<img width="1264" alt="Screenshot 2023-03-17 at 21 33 05"
src="https://user-images.githubusercontent.com/115237/226034050-a04b131d-fd3f-45c0-bc72-413738a59825.png">

Double row:
<img width="1243" alt="Screenshot 2023-03-17 at 21 32 53"
src="https://user-images.githubusercontent.com/115237/226034163-2f1c6aa9-fc72-432f-bc46-9a7119da8677.png">

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/css/repository.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index 8e3788b804..b71d552a1f 100644
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -1611,12 +1611,14 @@
   padding: 7px 0;
   background: var(--color-body);
   line-height: 30px;
+  height: 47px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
 }
 
 @media (max-width: 991px) {
   .repository .diff-detail-box {
     flex-direction: column;
     align-items: flex-start;
+    height: 77px; /* match .ui.attached.header.diff-file-header.sticky-2nd-row */
   }
 }
 
@@ -1630,7 +1632,7 @@
   position: sticky;
   top: 0;
   z-index: 8;
-  border-bottom: 1px solid var(--color-secondary);
+  border-bottom: none;
   padding-left: 2px;
   padding-right: 2px;
   margin-left: -1px;
@@ -3318,10 +3320,16 @@ td.blob-excerpt {
 
 .ui.attached.header.diff-file-header.sticky-2nd-row {
   position: sticky;
-  top: 77px;
+  top: 47px; /* match .repository .diff-detail-box */
   z-index: 7;
 }
 
+@media (max-width: 991px) {
+  .ui.attached.header.diff-file-header.sticky-2nd-row {
+    top: 77px; /* match .repository .diff-detail-box */
+  }
+}
+
 @media (max-width: 480px) {
   .ui.attached.header.diff-file-header.sticky-2nd-row {
     position: static;