From fd750f39b666c1103694511b88fb86163095df68 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Sun, 15 Mar 2026 15:29:01 +0100
Subject: [PATCH] fix(ui): improve consistency in new runner management pages
 (#11675)

Followup to https://codeberg.org/forgejo/forgejo/pulls/11516 which I didn't have time to review. Some consistency fixes.

Haven't done anything with the [actions in the table](https://codeberg.org/attachments/5a7eb4f2-c45c-4189-b952-ca4cd4085eb5) but something will need to be done. Like an ellipsis menu.

## Preview

![1](/attachments/a894648b-51e0-4706-9a83-338868a24970)

![2](/attachments/a8b3dc47-49fc-42d6-a353-a3b2963414d2)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11675
Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org>
Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
---
 templates/shared/actions/runner_create.tmpl | 6 +++---
 templates/shared/actions/runner_edit.tmpl   | 6 +++---
 templates/shared/actions/runner_list.tmpl   | 2 +-
 web_src/css/actions.css                     | 6 ------
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/templates/shared/actions/runner_create.tmpl b/templates/shared/actions/runner_create.tmpl
index 9ee7bedde8..d34b82cb97 100644
--- a/templates/shared/actions/runner_create.tmpl
+++ b/templates/shared/actions/runner_create.tmpl
@@ -14,9 +14,9 @@
 				<textarea id="description" name="runner_description"{{if .Err_RunnerDescription}} class="error"{{end}}>{{.Runner.Description}}</textarea>
 			</div>
 		</fieldset>
-		<div class="form-buttons">
-			<a class="ui secondary button" href="{{$.RunnersListLink}}">{{ctx.Locale.Tr "actions.runners.create_runner.cancel_button"}}</a>
-			<button class="ui primary button">{{ctx.Locale.Tr "actions.runners.create_runner.create_button"}}</button>
+		<div class="button-sequence">
+			<button class="primary button">{{ctx.Locale.Tr "actions.runners.create_runner.create_button"}}</button>
+			<a class="secondary button" href="{{$.RunnersListLink}}">{{ctx.Locale.Tr "actions.runners.create_runner.cancel_button"}}</a>
 		</div>
 	</form>
 </div>
diff --git a/templates/shared/actions/runner_edit.tmpl b/templates/shared/actions/runner_edit.tmpl
index 749a85a6a3..cd693abd75 100644
--- a/templates/shared/actions/runner_edit.tmpl
+++ b/templates/shared/actions/runner_edit.tmpl
@@ -26,9 +26,9 @@
 				</div>
 			</div>
 		</fieldset>
-		<div class="form-buttons">
-			<a class="ui secondary button" href="{{$.RunnersListLink}}">{{ctx.Locale.Tr "actions.runners.edit_runner.cancel_button"}}</a>
-			<button class="ui primary button">{{ctx.Locale.Tr "actions.runners.edit_runner.save_button"}}</button>
+		<div class="button-sequence">
+			<button class="primary button">{{ctx.Locale.Tr "actions.runners.edit_runner.save_button"}}</button>
+			<a class="secondary button" href="{{$.RunnersListLink}}">{{ctx.Locale.Tr "actions.runners.edit_runner.cancel_button"}}</a>
 		</div>
 	</form>
 </div>
diff --git a/templates/shared/actions/runner_list.tmpl b/templates/shared/actions/runner_list.tmpl
index e40aaaff3e..88c354b7cf 100644
--- a/templates/shared/actions/runner_list.tmpl
+++ b/templates/shared/actions/runner_list.tmpl
@@ -4,7 +4,7 @@
 		{{ctx.Locale.Tr "actions.runners.runner_manage_panel"}} ({{ctx.Locale.Tr "admin.total" .Total}})
 		<div class="ui right">
 			<div class="ui top right pointing dropdown">
-				<button class="ui secondary tiny button">
+				<button class="ui basic tiny button">
 					{{ctx.Locale.Tr "actions.runners.show_registration_token"}}
 					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 				</button>
diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index 03e548be4a..cb96bdeac6 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -105,12 +105,6 @@
   margin-block: 1rem !important;
 }
 
-.runner-container form .form-buttons {
-  display: flex;
-  justify-content: flex-end;
-  column-gap: 1.5rem;
-}
-
 .runner-container pre {
   color: var(--color-console-fg);
   background-color: var(--color-console-bg);