From 39f8ab591c18a65cf783ecd17ddc1a5914ceff7a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 18 Feb 2024 15:51:21 +0100
Subject: [PATCH] Clean up diff header css and reduce global textarea
 min-height (#29232)

1. Tweak diff header and remove a numbe of unneeded CSS for it:

Before:
<img width="433" alt="Screenshot 2024-02-18 at 01 08 09"
src="https://github.com/go-gitea/gitea/assets/115237/d8b377c0-57bc-44d5-bb57-a582c7d4b3b4">

After:
<img width="463" alt="Screenshot 2024-02-18 at 01 07 56"
src="https://github.com/go-gitea/gitea/assets/115237/d08c17e7-5b86-4d07-81da-6371f4754325">

3. Reduce height of review textarea and also reduce fomantic's CSS from
12em to 8em. Now fits better on my screen:

<img width="1352" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/5c658d13-295e-4929-94da-13ade888020d">

---------

Co-authored-by: delvh <dev.lh@web.de>
---
 templates/repo/commit_page.tmpl            |  2 +-
 templates/repo/diff/box.tmpl               |  2 +-
 web_src/css/base.css                       |  6 ++++++
 web_src/css/editor/combomarkdowneditor.css |  5 ++---
 web_src/css/repo.css                       | 18 +-----------------
 5 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index ce9fcecd8b..fbfaa19411 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -184,7 +184,7 @@
 				</div>
 		</div>
 		{{if .Commit.Signature}}
-			<div class="ui bottom attached message gt-text-left gt-df gt-ac gt-sb commit-header-row gt-fw {{$class}}">
+			<div class="ui bottom attached message gt-text-left gt-df gt-ac gt-sb commit-header-row gt-fw gt-mb-0 {{$class}}">
 				<div class="gt-df gt-ac">
 					{{if .Verification.Verified}}
 						{{if ne .Verification.SigningUser.ID 0}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index be7c7e80f2..5960decc06 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -1,7 +1,7 @@
 {{$showFileTree := (and (not .DiffNotAvailable) (gt .Diff.NumFiles 1))}}
 <div>
 	<div class="diff-detail-box diff-box">
-		<div class="gt-df gt-ac gt-fw">
+		<div class="gt-df gt-ac gt-fw gt-gap-3 gt-ml-1">
 			{{if $showFileTree}}
 				<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 */}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 0d547f16ff..76ecfc9bf5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -21,6 +21,7 @@
   --border-radius-circle: 50%;
   --opacity-disabled: 0.55;
   --height-loading: 16rem;
+  --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
   --tab-size: 4;
 }
 
@@ -492,6 +493,11 @@ ol.ui.list li,
   background: var(--color-active) !important;
 }
 
+.ui.form textarea:not([rows]) {
+  height: var(--min-height-textarea); /* override fomantic default 12em */
+  min-height: var(--min-height-textarea); /* override fomantic default 8em */
+}
+
 /* styles from removed fomantic transition module */
 .hidden.transition {
   visibility: hidden;
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css
index 12ec1866a5..8a2f4ea416 100644
--- a/web_src/css/editor/combomarkdowneditor.css
+++ b/web_src/css/editor/combomarkdowneditor.css
@@ -37,13 +37,12 @@
 .combo-markdown-editor textarea.markdown-text-editor {
   display: block;
   width: 100%;
-  min-height: 200px;
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - var(--min-height-textarea));
   resize: vertical;
 }
 
 .combo-markdown-editor .CodeMirror-scroll {
-  max-height: calc(100vh - 200px);
+  max-height: calc(100vh - var(--min-height-textarea));
 }
 
 /* use the same styles as markup/content.css */
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 610c3fcb55..31cff0ca15 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1498,12 +1498,6 @@
   background: var(--color-body);
 }
 
-@media (max-width: 991.98px) {
-  .repository .diff-detail-box {
-    flex-direction: row;
-  }
-}
-
 @media (max-width: 480px) {
   .repository .diff-detail-box {
     flex-wrap: wrap;
@@ -1528,7 +1522,7 @@
   color: var(--color-red);
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 800px) {
   .repository .diff-detail-box .diff-detail-stats {
     display: none !important;
   }
@@ -1538,7 +1532,6 @@
   display: flex;
   align-items: center;
   gap: 0.25em;
-  flex-wrap: wrap;
   justify-content: end;
 }
 
@@ -1548,15 +1541,6 @@
   margin-right: 0 !important;
 }
 
-@media (max-width: 480px) {
-  .repository .diff-detail-box .diff-detail-actions {
-    padding-top: 0.25rem;
-  }
-  .repository .diff-detail-box .diff-detail-actions .ui.button:not(.btn-submit) {
-    padding: 0 0.5rem;
-  }
-}
-
 .repository .diff-detail-box span.status {
   display: inline-block;
   width: 12px;