From e719bf8ead149c913b59279fb70688ad8f8d2573 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Thu, 28 Sep 2023 21:27:13 +0800
Subject: [PATCH] Fix review UI (#27322) (#27331)

Backport #27322 by @wxiaoguang

Close #26730


1. The `diff-detail-box` was abused, it shouldn't be used for
"DiffFileList/DiffFileTree".
2. Fix the sticky position for various screens.



![image](https://github.com/go-gitea/gitea/assets/2114189/558a5c06-c94c-4e5c-8395-d38473dd21c2)


![image](https://github.com/go-gitea/gitea/assets/2114189/3390fb0e-7dc7-457f-bd0c-398fdb6d24c0)


![image](https://github.com/go-gitea/gitea/assets/2114189/d19dd350-aecf-4909-8ef9-73b09d94560e)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/diff/box.tmpl           |  2 +-
 web_src/css/repo.css                   | 23 +++++++++--------------
 web_src/js/components/DiffFileList.vue |  2 +-
 web_src/js/components/DiffFileTree.vue |  2 +-
 4 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 15766363e..94a5a9a29 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -1,5 +1,5 @@
 <div>
-	<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac">
+	<div class="diff-detail-box diff-box">
 		<div class="gt-df gt-ac gt-fw">
 			{{if not .DiffNotAvailable}}
 				<button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 8e751ef88..d0d001bf5 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1502,14 +1502,21 @@
 }
 
 .repository .diff-detail-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 8;
   padding: 7px 0;
+  height: 44px; /* this height should match sticky-2nd-row */
   background: var(--color-body);
 }
 
 @media (max-width: 991.98px) {
   .repository .diff-detail-box {
     flex-direction: row;
-    align-items: flex-start;
+    height: 77px; /* this height should match sticky-2nd-row */
   }
 }
 
@@ -1518,18 +1525,6 @@
     flex-wrap: wrap;
   }
 }
-
-.repository .diff-detail-box.sticky {
-  position: sticky;
-  top: 0;
-  z-index: 8;
-  border-bottom: none;
-  padding-left: 5px;
-  padding-right: 5px;
-  margin-left: -4px;
-  margin-right: -4px;
-}
-
 .repository .diff-detail-box .diff-detail-stats strong {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -2830,7 +2825,7 @@ tbody.commit-list {
 
 .ui.attached.header.diff-file-header.sticky-2nd-row {
   position: sticky;
-  top: 47px; /* match .repository .diff-detail-box */
+  top: 44px; /* match .repository .diff-detail-box */
   z-index: 7;
 }
 
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 103526d02..8bde61804 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible">
+  <ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible">
     <li v-for="file in store.files" :key="file.NameHash">
       <div class="gt-font-semibold gt-df gt-ac pull-right">
         <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span>
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 8ee86857a..6136f7b94 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -126,7 +126,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box">
+  <div v-if="store.fileTreeIsVisible" class="gt-mr-3">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     <div v-if="store.isIncomplete" class="gt-pt-2">