From dae527fbc5963369a4b02e9ba04f953e82205d30 Mon Sep 17 00:00:00 2001
From: Sebastian Sauer <sauer.sebastian@gmail.com>
Date: Thu, 2 Nov 2023 20:55:01 +0100
Subject: [PATCH 1/4] Fix Show/hide filetree button on small displays

the gt-df's display:flex !important did override the display:none on small displays
---
 templates/repo/diff/box.tmpl | 2 +-
 web_src/css/repo.css         | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index c037c3b365238..fcb7154715c09 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -3,7 +3,7 @@
 	<div class="diff-detail-box diff-box">
 		<div class="gt-df gt-ac gt-fw">
 			{{if $showFileTree}}
-				<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"}}">
+				<button class="diff-toggle-file-tree-button 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"}}">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
 					{{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
 					{{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index e4995d42298b6..2a79bfcbd14cb 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2759,6 +2759,7 @@ tbody.commit-list {
   border: none;
   user-select: none;
   color: inherit;
+  display: flex !important;
 }
 
 .diff-toggle-file-tree-button:hover {

From dca299a105780366d91eb7829ed42b64e887918d Mon Sep 17 00:00:00 2001
From: Sebastian Sauer <sauer.sebastian@gmail.com>
Date: Thu, 2 Nov 2023 21:40:13 +0100
Subject: [PATCH 2/4] Remove not needed important

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

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 2a79bfcbd14cb..f13c20a33c1d5 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2759,7 +2759,7 @@ tbody.commit-list {
   border: none;
   user-select: none;
   color: inherit;
-  display: flex !important;
+  display: flex;
 }
 
 .diff-toggle-file-tree-button:hover {

From ecc0d0f47f52b7d57bbedfd508ae51656fa13fab Mon Sep 17 00:00:00 2001
From: Sebastian Sauer <sauer.sebastian@gmail.com>
Date: Fri, 3 Nov 2023 19:21:27 +0100
Subject: [PATCH 3/4] remove not needed special css and use util functions

add hide-992 helper class to hide element at screens < 992px
---
 templates/repo/diff/box.tmpl |  4 ++--
 web_src/css/base.css         |  7 +++++++
 web_src/css/repo.css         | 21 ---------------------
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index fcb7154715c09..8c21d26914b6b 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -3,7 +3,7 @@
 	<div class="diff-detail-box diff-box">
 		<div class="gt-df gt-ac gt-fw">
 			{{if $showFileTree}}
-				<button class="diff-toggle-file-tree-button 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"}}">
+				<button class="diff-toggle-file-tree-button hide-992 btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
 					{{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
 					{{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
@@ -89,7 +89,7 @@
 	{{end}}
 	<div id="diff-container">
 		{{if $showFileTree}}
-			<div id="diff-file-tree" class="gt-hidden"></div>
+			<div id="diff-file-tree" class="gt-hidden hide-992"></div>
 			<script>
 				if (diffTreeVisible) document.getElementById('diff-file-tree').classList.remove('gt-hidden');
 			</script>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index ae8eb057090e2..cd293408bcbce 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1289,6 +1289,13 @@ img.ui.avatar,
   }
 }
 
+@media (max-width: 991.98px) {
+  /* double selector so it wins over .gt-df etc */
+  .hide-992.hide-992 {
+    display: none !important;
+  }
+}
+
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index f13c20a33c1d5..eaec3acffbd9d 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2754,27 +2754,6 @@ tbody.commit-list {
   overflow-y: auto;
 }
 
-.diff-toggle-file-tree-button {
-  background: none;
-  border: none;
-  user-select: none;
-  color: inherit;
-  display: flex;
-}
-
-.diff-toggle-file-tree-button:hover {
-  color: var(--color-primary);
-}
-
-@media (max-width: 991.98px) {
-  #diff-file-tree {
-    display: none !important;
-  }
-  .diff-toggle-file-tree-button {
-    display: none !important;
-  }
-}
-
 .ui.message.unicode-escape-prompt {
   margin-bottom: 0;
   border-radius: 0;

From 6b2356fd49300801d01a3cff669088465aa4314e Mon Sep 17 00:00:00 2001
From: Sebastian Sauer <sauer.sebastian@gmail.com>
Date: Wed, 15 Nov 2023 21:05:54 +0100
Subject: [PATCH 4/4] Use not mobile class for file-tree

---
 templates/repo/diff/box.tmpl | 4 ++--
 web_src/css/base.css         | 7 -------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 8c21d26914b6b..cb44d31cbd24e 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -3,7 +3,7 @@
 	<div class="diff-detail-box diff-box">
 		<div class="gt-df gt-ac gt-fw">
 			{{if $showFileTree}}
-				<button class="diff-toggle-file-tree-button hide-992 btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
+				<button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
 					{{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
 					{{svg "octicon-sidebar-expand" 20 "icon gt-hidden"}}
@@ -89,7 +89,7 @@
 	{{end}}
 	<div id="diff-container">
 		{{if $showFileTree}}
-			<div id="diff-file-tree" class="gt-hidden hide-992"></div>
+			<div id="diff-file-tree" class="gt-hidden not-mobile"></div>
 			<script>
 				if (diffTreeVisible) document.getElementById('diff-file-tree').classList.remove('gt-hidden');
 			</script>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index cd293408bcbce..ae8eb057090e2 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1289,13 +1289,6 @@ img.ui.avatar,
   }
 }
 
-@media (max-width: 991.98px) {
-  /* double selector so it wins over .gt-df etc */
-  .hide-992.hide-992 {
-    display: none !important;
-  }
-}
-
 .ui.menu.new-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);