Align sidebar gears to the right (#33721)

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 <[email protected]>
Co-authored-by: Giteabot <[email protected]>

Author: quentinguidee

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>

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>

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>

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>

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>

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">

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;
+}