From 787e3163f83c8fe9e776771037e96302bc97b1a9 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Thu, 21 Nov 2024 22:46:06 +0500
Subject: [PATCH] fix(ui): put buttons in a single row on mobile

---
 templates/repo/issue/view_content.tmpl        |  2 +-
 .../repo/issue/view_content/conversation.tmpl |  4 ++--
 web_src/css/base.css                          | 14 +++++++++++++
 web_src/css/repo.css                          | 10 ---------
 web_src/css/review.css                        | 21 -------------------
 5 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index bd52198264..f074a854b5 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -90,7 +90,7 @@
 							{{template "repo/issue/comment_tab" .}}
 							{{.CsrfTokenHtml}}
 							<div class="field footer">
-								<div class="text right">
+								<div class="right button-sequence">
 									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 										{{if .Issue.IsClosed}}
 											<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
index 1e7a5c1401..4f70e799a2 100644
--- a/templates/repo/issue/view_content/conversation.tmpl
+++ b/templates/repo/issue/view_content/conversation.tmpl
@@ -106,7 +106,7 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
+		<div class="tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
 			<div class="tw-flex-1">
 				{{if $resolved}}
 					<div class="ui grey text">
@@ -115,7 +115,7 @@
 					</div>
 				{{end}}
 			</div>
-			<div class="code-comment-buttons-buttons button-row">
+			<div class="right button-sequence">
 				{{if and $.CanMarkConversation $isNotPending}}
 					<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index .comments 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
 						{{if $resolved}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4c1317ba79..fc3200d7da 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -250,6 +250,20 @@ h1.error-code {
   gap: 0.5rem;
 }
 
+.button-sequence {
+  display: flex;
+  flex-flow: wrap;
+  gap: 0.5em;
+}
+
+.button-sequence.right {
+  justify-content: end;
+}
+
+.button-sequence .ui.button {
+  margin: 0 !important;
+}
+
 .button-row .ui.button {
   margin-right: 0;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 3ee76b5af3..6568a0de03 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -925,16 +925,6 @@ td .commit-summary {
   border-radius: var(--border-radius);
 }
 
-@media (max-width: 767.98px) {
-  .repository.view.issue .comment-list .comment .content .form .button {
-    width: 100%;
-    margin: 0;
-  }
-  .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) {
-    margin-bottom: 1rem;
-  }
-}
-
 .repository.view.issue .comment-list .comment .merge-section {
   background-color: var(--color-box-body);
 }
diff --git a/web_src/css/review.css b/web_src/css/review.css
index a198edf6c5..c1ef21bdc0 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -76,19 +76,6 @@
     max-width: none;
     padding: 0.75rem !important;
   }
-  .comment-code-cloud .code-comment-buttons {
-    margin: 0.5rem 0 0.25rem !important;
-  }
-  .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
-    width: 100%;
-  }
-  .comment-code-cloud .ui.buttons {
-    width: 100%;
-    margin: 0 !important;
-  }
-  .comment-code-cloud .ui.buttons .button {
-    flex: 1;
-  }
 }
 
 .comment-code-cloud .comments .comment {
@@ -183,14 +170,6 @@
   display: block;
 }
 
-@media (max-width: 767.98px) {
-  .comment-code-cloud .button {
-    width: 100%;
-    margin: 0 !important;
-    margin-bottom: 0.75rem !important;
-  }
-}
-
 .diff-file-body .comment-form {
   margin: 0 0 0 3em;
 }