From 793c0e1fa6ecddb60885f17d5e34f8adf9b1a87c Mon Sep 17 00:00:00 2001
From: Quentin <git@quentinguidee.dev>
Date: Wed, 26 Feb 2025 23:03:23 +0100
Subject: [PATCH] Align sidebar gears to the right (#33721)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, the issue/pr sidebar is hard to read visually. One of the
reason is that the gear icons make reading difficult because they are
"in the way" when reading, and not aligned together.

This PR proposes to align them on the right.

Actions are also better highlighted this way.

## Screenshots

### Issue

| Before this PR | After this PR |
| --- | --- |
| <img width="322" alt="Capture d’écran 2025-02-25 à 19 59 39"
src="https://github.com/user-attachments/assets/efdd13af-7b22-4f2b-8e65-dd17d6f3ffad"
/> | <img width="322" alt="Capture d’écran 2025-02-25 à 19 58 56"
src="https://github.com/user-attachments/assets/eeacc3f4-5e2c-4558-a4b3-0f1ab4742107"
/> |

### Pull Request


| Before this PR | After this PR |
| --- | --- |
| <img width="322" alt="Capture d’écran 2025-02-25 à 20 16 12"
src="https://github.com/user-attachments/assets/c274b58b-ad50-4ad8-b3da-91dbabd1b120"
/> | <img width="322" alt="Capture d’écran 2025-02-25 à 20 15 54"
src="https://github.com/user-attachments/assets/ecfd6d60-a525-4767-872d-2ef84030d81e"
/> |

Signed-off-by: Quentin Guidée <quentin.guidee@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/repo/issue/sidebar/assignee_list.tmpl        |  2 +-
 templates/repo/issue/sidebar/label_list.tmpl           |  2 +-
 templates/repo/issue/sidebar/milestone_list.tmpl       |  2 +-
 templates/repo/issue/sidebar/project_list.tmpl         |  2 +-
 templates/repo/issue/sidebar/reviewer_list.tmpl        |  2 +-
 .../repo/issue/sidebar/stopwatch_timetracker.tmpl      |  8 +++++---
 web_src/css/base.css                                   | 10 ++++++++++
 7 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/templates/repo/issue/sidebar/assignee_list.tmpl b/templates/repo/issue/sidebar/assignee_list.tmpl
index f124c3f1ce..19927cbd41 100644
--- a/templates/repo/issue/sidebar/assignee_list.tmpl
+++ b/templates/repo/issue/sidebar/assignee_list.tmpl
@@ -6,7 +6,7 @@
 		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/assignee?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
 >
 	<input class="combo-value" name="assignee_ids" type="hidden" value="{{$data.SelectedAssigneeIDs}}">
-	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+	<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.assignees"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
diff --git a/templates/repo/issue/sidebar/label_list.tmpl b/templates/repo/issue/sidebar/label_list.tmpl
index 9b6195a8f4..7d4ad264c2 100644
--- a/templates/repo/issue/sidebar/label_list.tmpl
+++ b/templates/repo/issue/sidebar/label_list.tmpl
@@ -4,7 +4,7 @@
 		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/labels?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
 >
 	<input class="combo-value" name="label_ids" type="hidden" value="{{$data.SelectedLabelIDs}}">
-	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+	<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.labels"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
diff --git a/templates/repo/issue/sidebar/milestone_list.tmpl b/templates/repo/issue/sidebar/milestone_list.tmpl
index bbac78341d..4ca0d1bd3a 100644
--- a/templates/repo/issue/sidebar/milestone_list.tmpl
+++ b/templates/repo/issue/sidebar/milestone_list.tmpl
@@ -6,7 +6,7 @@
 		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/milestone?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
 >
 	<input class="combo-value" name="milestone_id" type="hidden" value="{{$data.SelectedMilestoneID}}">
-	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+	<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
diff --git a/templates/repo/issue/sidebar/project_list.tmpl b/templates/repo/issue/sidebar/project_list.tmpl
index 4520d1f88d..0d8a88e8fa 100644
--- a/templates/repo/issue/sidebar/project_list.tmpl
+++ b/templates/repo/issue/sidebar/project_list.tmpl
@@ -6,7 +6,7 @@
 		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/projects?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
 >
 	<input class="combo-value" name="project_id" type="hidden" value="{{$data.SelectedProjectID}}">
-	<div class="ui dropdown {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
+	<div class="ui dropdown text-flex-grow {{if not $pageMeta.CanModifyIssueOrPull}}disabled{{end}}">
 		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.projects"}}</strong> {{if $pageMeta.CanModifyIssueOrPull}}{{svg "octicon-gear"}}{{end}}
 		</a>
diff --git a/templates/repo/issue/sidebar/reviewer_list.tmpl b/templates/repo/issue/sidebar/reviewer_list.tmpl
index b08af03a01..3ad906fd7e 100644
--- a/templates/repo/issue/sidebar/reviewer_list.tmpl
+++ b/templates/repo/issue/sidebar/reviewer_list.tmpl
@@ -6,7 +6,7 @@
 		{{if $pageMeta.Issue}}data-update-url="{{$pageMeta.RepoLink}}/issues/request_review?issue_ids={{$pageMeta.Issue.ID}}"{{end}}
 >
 	<input type="hidden" class="combo-value" name="reviewer_ids">{{/* match CreateIssueForm */}}
-	<div class="ui dropdown {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
+	<div class="ui dropdown text-flex-grow {{if or (not $hasCandidates) (not $data.CanChooseReviewer)}}disabled{{end}}">
 		<a class="text muted">
 			<strong>{{ctx.Locale.Tr "repo.issues.review.reviewers"}}</strong> {{if $data.CanChooseReviewer}}{{svg "octicon-gear"}}{{end}}
 		</a>
diff --git a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
index d5ac6827ba..a72749a9f3 100644
--- a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
+++ b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
@@ -2,10 +2,12 @@
 	{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
 		<div class="divider"></div>
 		<div>
-			<div class="ui dropdown jump">
+			<div class="ui dropdown text-flex-grow jump">
 				<a class="text muted">
-					<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{svg "octicon-gear"}}
-					{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
+					<div>
+						<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong> {{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
+					</div>
+					{{svg "octicon-gear"}}
 				</a>
 				<div class="menu">
 					<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 76d7d82a5c..68015e4031 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1188,3 +1188,13 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
   overflow: hidden !important;
   text-overflow: ellipsis !important;
 }
+
+.ui.dropdown.text-flex-grow {
+  display: flex;
+}
+
+.ui.dropdown.text-flex-grow > .text {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}