From 30be22f30f0dde56c073a4a2a6722f86de79f5b7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Sun, 19 Apr 2026 18:57:48 +0800
Subject: [PATCH] Refactor frontend `tw-justify-between` layouts to
 `flex-left-right` (#37291)

This PR standardizes left/right two-child frontend layouts on
`flex-left-right` and removes ad-hoc `tw-justify-between` combinations.
The goal is consistent wrapping + spacing behavior under narrow widths
with less utility-class churn.

Also: remove useless "flex-center-wrap", slightly improve some templates
(no visual change, tested)

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: wxiaoguang <2114189+wxiaoguang@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/org/team/sidebar.tmpl                      |  2 +-
 templates/org/team/teams.tmpl                        |  4 ++--
 templates/projects/list.tmpl                         |  2 +-
 templates/repo/actions/list.tmpl                     |  2 +-
 templates/repo/actions/workflow_dispatch.tmpl        |  2 +-
 templates/repo/blame.tmpl                            |  2 +-
 templates/repo/branch/list.tmpl                      |  2 +-
 templates/repo/commits_table.tmpl                    |  2 +-
 templates/repo/diff/box.tmpl                         |  2 +-
 templates/repo/editor/edit.tmpl                      |  2 +-
 templates/repo/editor/patch.tmpl                     |  2 +-
 templates/repo/issue/filter_actions.tmpl             |  3 +--
 templates/repo/issue/sidebar/due_date.tmpl           |  2 +-
 templates/repo/issue/sidebar/issue_dependencies.tmpl | 10 +++++-----
 templates/repo/issue/view_content/conversation.tmpl  |  2 +-
 templates/repo/pulls/status.tmpl                     |  2 +-
 templates/repo/release/list.tmpl                     |  2 +-
 templates/repo/settings/githook_edit.tmpl            |  2 +-
 templates/repo/settings/webhook/history.tmpl         |  2 +-
 templates/repo/view_file.tmpl                        |  4 ++--
 templates/repo/wiki/new.tmpl                         |  2 +-
 templates/repo/wiki/pages.tmpl                       |  2 +-
 templates/repo/wiki/revision.tmpl                    |  2 +-
 templates/shared/searchbottom.tmpl                   |  2 +-
 templates/user/notification/notification_div.tmpl    |  2 +-
 .../notification/notification_subscriptions.tmpl     |  6 ++----
 web_src/css/base.css                                 | 12 ++----------
 web_src/js/components/RepoCodeFrequency.vue          |  2 +-
 web_src/js/components/RepoContributors.vue           |  2 +-
 web_src/js/components/RepoRecentCommits.vue          |  2 +-
 web_src/js/features/repo-issue-content.ts            |  2 +-
 31 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index 645c94d4162..1487c280dee 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -1,7 +1,7 @@
 <div class="ui six wide column">
 	<h4 class="ui top attached header flex-left-right">
 		<strong>{{.Team.Name}}</strong>
-		<div class="flex-center-wrap">
+		<div class="flex-text-block">
 			{{if .Team.IsMember ctx $.SignedUser.ID}}
 				<button class="ui red mini compact button show-modal" data-modal="#org-member-leave-team"
 					data-modal-form.action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/leave?uid={{$.SignedUser.ID}}"
diff --git a/templates/org/team/teams.tmpl b/templates/org/team/teams.tmpl
index 3916bd0a5b1..48b404e17b6 100644
--- a/templates/org/team/teams.tmpl
+++ b/templates/org/team/teams.tmpl
@@ -22,7 +22,7 @@
 				<div class="column team-item-box">
 					<div class="ui top attached header muted-links flex-left-right team-item-header">
 						<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}"><strong>{{.Name}}</strong></a>
-						<div class="flex-center-wrap">
+						<div class="flex-text-block tw-flex-wrap">
 							<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}">{{.NumMembers}} {{ctx.Locale.Tr "org.lower_members"}}</a>
 							·
 							<a href="{{$.OrgLink}}/teams/{{.LowerName | PathEscape}}/repositories">{{.NumRepos}} {{ctx.Locale.Tr "org.lower_repositories"}}</a>
@@ -40,7 +40,7 @@
 					</div>
 					{{end}}
 					<div class="ui attached segment">
-						<div class="flex-center-wrap">
+						<div class="flex-text-block tw-flex-wrap">
 							{{range .Members}}
 								{{template "shared/user/avatarlink" dict "user" . "size" 32 "tooltip" true}}
 							{{else}}
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 6a5fbc5a0b8..346f4002b40 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -1,5 +1,5 @@
 {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-	<div class="flex-text-block tw-justify-between tw-mb-4">
+	<div class="flex-left-right tw-mb-4">
 		<div class="small-menu-items ui compact tiny menu list-header-toggle">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="?state=open&q={{$.Keyword}}">
 				{{svg "octicon-project-symlink" 16 "tw-mr-2"}}
diff --git a/templates/repo/actions/list.tmpl b/templates/repo/actions/list.tmpl
index 7baac43dcf8..4fbc58592a0 100644
--- a/templates/repo/actions/list.tmpl
+++ b/templates/repo/actions/list.tmpl
@@ -25,7 +25,7 @@
 				</div>
 			</div>
 			<div class="flex-container-main">
-				<div class="ui top attached header flex-text-block tw-flex-wrap tw-justify-between">
+				<div class="ui top attached header flex-left-right">
 					<strong>{{ctx.Locale.TrN .Page.Paginater.Total "actions.runs.workflow_run_count_1" "actions.runs.workflow_run_count_n" .Page.Paginater.Total}}</strong>
 					<div class="ui secondary filter menu flex-text-block tw-m-0">
 						<!-- Actor -->
diff --git a/templates/repo/actions/workflow_dispatch.tmpl b/templates/repo/actions/workflow_dispatch.tmpl
index e28d965b438..a859f6886bb 100644
--- a/templates/repo/actions/workflow_dispatch.tmpl
+++ b/templates/repo/actions/workflow_dispatch.tmpl
@@ -1,5 +1,5 @@
 {{/* "z-index" is used to maintain continuous attached styling and keep the colored border-bottom visible (pre-existing fomantic issue with negative margins) */}}
-<div class="ui blue info attached message flex-text-block tw-flex-wrap tw-justify-between tw-z-1">
+<div class="ui blue info attached message flex-left-right tw-z-1">
 	<span>{{ctx.Locale.Tr "actions.workflow.has_workflow_dispatch"}}</span>
 	<div class="flex-text-block tw-bg-box-body tw-rounded">{{/*make the button have correct hovered color */}}
 		<button class="ui mini button show-modal" data-modal="#runWorkflowDispatchModal">{{ctx.Locale.Tr "actions.workflow.run"}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}</button>
diff --git a/templates/repo/blame.tmpl b/templates/repo/blame.tmpl
index 489590cd4df..8bdefa5d43e 100644
--- a/templates/repo/blame.tmpl
+++ b/templates/repo/blame.tmpl
@@ -11,7 +11,7 @@
 	{{end}}
 {{end}}
 <div class="{{TabSizeClass .Editorconfig .FileTreePath}} non-diff-file-content">
-	<h4 class="file-header ui top attached header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
+	<h4 class="file-header ui top attached header flex-left-right">
 		<div class="file-header-left tw-flex tw-items-center tw-py-2 tw-pr-4">
 			{{template "repo/file_info" .}}
 		</div>
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 5ae33935758..40aefe5b113 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -70,7 +70,7 @@
 			</div>
 		{{end}}
 
-		<h4 class="ui top attached header tw-flex tw-items-center tw-justify-between">
+		<h4 class="ui top attached header">
 			<div class="flex-text-block">
 				{{ctx.Locale.Tr "repo.branches"}}
 			</div>
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 8f6e6e01692..56a4867ff4b 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -1,4 +1,4 @@
-<h4 class="ui top attached header commits-table tw-flex tw-items-center tw-justify-between">
+<h4 class="ui top attached header commits-table flex-left-right">
 	<div class="commits-table-left flex-text-block">
 		{{if or .PageIsCommits (gt .CommitCount 0)}}
 			{{.CommitCount}} {{ctx.Locale.Tr "repo.commits.commits"}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index ffba4cf1521..ccb9e80f28b 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -211,7 +211,7 @@
 
 				{{if .Diff.IsIncomplete}}
 					<div class="diff-file-box file-content tw-mt-2" id="diff-incomplete">
-						<h4 class="ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between">
+						<h4 class="ui top attached header tw-font-normal flex-left-right">
 							{{ctx.Locale.Tr "repo.diff.too_many_files"}}
 							<a class="ui basic tiny button" id="diff-show-more-files" data-href="?skip-to={{.Diff.End}}&file-only=true">{{ctx.Locale.Tr "repo.diff.show_more"}}</a>
 						</h4>
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index bb258d333d1..74d6dcb07f8 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -18,7 +18,7 @@
 					{{if not .NotEditableReason}}
 						<div class="field">
 							<div class="ui top attached header">
-								<div class="flex-text-block tw-justify-between tw-flex-wrap">
+								<div class="flex-left-right">
 									<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}">
 										<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
 										<a class="item {{if not .CodeEditorConfig.Previewable}}tw-hidden{{end}}" data-tab="preview">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl
index 9b352262fad..10172a36a72 100644
--- a/templates/repo/editor/patch.tmpl
+++ b/templates/repo/editor/patch.tmpl
@@ -21,7 +21,7 @@
 			</div>
 			<div class="field">
 				<div class="ui top attached header">
-					<div class="flex-text-block tw-justify-between tw-flex-wrap">
+					<div class="flex-left-right">
 						<div class="ui compact small menu small-menu-items repo-editor-menu">
 							<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
 						</div>
diff --git a/templates/repo/issue/filter_actions.tmpl b/templates/repo/issue/filter_actions.tmpl
index 8e2410393d8..4c9366a645b 100644
--- a/templates/repo/issue/filter_actions.tmpl
+++ b/templates/repo/issue/filter_actions.tmpl
@@ -29,7 +29,7 @@
 						<div class="divider"></div>
 					{{end}}
 					{{$previousExclusiveScope = $exclusiveScope}}
-					<div class="item issue-action tw-flex tw-justify-between" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
+					<div class="item issue-action flex-left-right" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
 						{{if SliceUtils.Contains $.SelLabelIDs .ID}}{{svg (Iif $exclusiveScope "octicon-dot-fill" "octicon-check")}}{{end}} {{ctx.RenderUtils.RenderLabel .}}
 						{{template "repo/issue/labels/label_archived" .}}
 					</div>
@@ -125,4 +125,3 @@
 		</div>
 	{{end}}
 </div>
-
diff --git a/templates/repo/issue/sidebar/due_date.tmpl b/templates/repo/issue/sidebar/due_date.tmpl
index 0e3d57eb728..b312e8a889e 100644
--- a/templates/repo/issue/sidebar/due_date.tmpl
+++ b/templates/repo/issue/sidebar/due_date.tmpl
@@ -2,7 +2,7 @@
 <span class="text"><strong>{{ctx.Locale.Tr "repo.issues.due_date"}}</strong></span>
 <div class="ui form tw-mt-2">
 	{{if .Issue.DeadlineUnix}}
-		<div class="tw-flex tw-justify-between tw-items-center tw-gap-2">
+		<div class="flex-left-right">
 			<div class="due-date {{if .Issue.IsOverdue}}tw-text-red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
 				{{svg "octicon-calendar"}} {{DateUtils.AbsoluteLong .Issue.DeadlineUnix}}
 			</div>
diff --git a/templates/repo/issue/sidebar/issue_dependencies.tmpl b/templates/repo/issue/sidebar/issue_dependencies.tmpl
index 0eb7f26c706..f1555dfa397 100644
--- a/templates/repo/issue/sidebar/issue_dependencies.tmpl
+++ b/templates/repo/issue/sidebar/issue_dependencies.tmpl
@@ -20,7 +20,7 @@
 			</span>
 			<div class="ui divided list">
 				{{range .BlockingDependencies}}
-					<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} tw-flex tw-items-center tw-justify-between">
+					<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} flex-left-right">
 						<div class="item-left tw-flex tw-justify-center tw-flex-col tw-flex-1 gt-ellipsis">
 							<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
 								#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
@@ -41,7 +41,7 @@
 					</div>
 				{{end}}
 				{{if .BlockingDependenciesNotPermitted}}
-					<div class="item tw-flex tw-items-center tw-justify-between gt-ellipsis">
+					<div class="item gt-ellipsis">
 						<span>{{ctx.Locale.TrN (len .BlockingDependenciesNotPermitted) "repo.issues.dependency.no_permission_1" "repo.issues.dependency.no_permission_n" (len .BlockingDependenciesNotPermitted)}}</span>
 					</div>
 				{{end}}
@@ -54,7 +54,7 @@
 			</span>
 			<div class="ui divided list">
 				{{range .BlockedByDependencies}}
-					<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} tw-flex tw-items-center tw-justify-between">
+					<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} flex-left-right">
 						<div class="item-left tw-flex tw-justify-center tw-flex-col tw-flex-1 gt-ellipsis">
 							<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
 								#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
@@ -76,7 +76,7 @@
 				{{end}}
 				{{if $.CanCreateIssueDependencies}}
 					{{range .BlockedByDependenciesNotPermitted}}
-						<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} tw-flex tw-items-center tw-justify-between">
+						<div class="item dependency{{if .Issue.IsClosed}} is-closed{{end}} flex-left-right">
 							<div class="item-left tw-flex tw-justify-center tw-flex-col tw-flex-1 gt-ellipsis">
 								<div class="gt-ellipsis">
 									<span data-tooltip-content="{{ctx.Locale.Tr "repo.issues.dependency.no_permission.can_remove"}}">{{svg "octicon-lock" 16}}</span>
@@ -100,7 +100,7 @@
 						</div>
 					{{end}}
 				{{else if .BlockedByDependenciesNotPermitted}}
-					<div class="item tw-flex tw-items-center tw-justify-between gt-ellipsis">
+					<div class="item gt-ellipsis">
 						<span>{{ctx.Locale.TrN (len .BlockedByDependenciesNotPermitted) "repo.issues.dependency.no_permission_1" "repo.issues.dependency.no_permission_n" (len .BlockedByDependenciesNotPermitted)}}</span>
 					</div>
 				{{end}}
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
index 333d120fde7..df383f46b87 100644
--- a/templates/repo/issue/view_content/conversation.tmpl
+++ b/templates/repo/issue/view_content/conversation.tmpl
@@ -11,7 +11,7 @@ The variables in "ctx.Data" are different in each case, making this template fra
 	{{$hasReview := and $comment.Review}}
 	{{$isReviewPending := and $hasReview (eq $comment.Review.Type 0)}}
 	<div class="ui segments conversation-holder">
-		<div class="ui segment collapsible-comment-box tw-py-2 tw-flex tw-items-center tw-justify-between">
+		<div class="ui segment collapsible-comment-box tw-py-2 flex-left-right">
 			<div class="tw-flex tw-items-center">
 				<a href="{{$comment.CodeCommentLink ctx}}" class="file-comment tw-ml-2 tw-break-anywhere">{{$comment.TreePath}}</a>
 				{{if $invalid}}
diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
index ec71c84b663..9f972be9d35 100644
--- a/templates/repo/pulls/status.tmpl
+++ b/templates/repo/pulls/status.tmpl
@@ -21,7 +21,7 @@
 	</div>
 
 	{{if and $statusCheckData $statusCheckData.RequireApprovalRunCount}}
-		<div class="ui attached segment flex-text-block tw-justify-between" id="approve-status-checks">
+		<div class="ui attached segment flex-left-right" id="approve-status-checks">
 			<div>
 				<strong>
 					{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals" $statusCheckData.RequireApprovalRunCount}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 90ad32bcf05..1009d224372 100644
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -30,7 +30,7 @@
 						{{end}}
 					</div>
 					<div class="ui segment detail">
-						<div class="tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-mb-2">
+						<div class="flex-left-right tw-mb-2">
 							<h4 class="release-list-title tw-break-anywhere">
 								{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
 								{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
diff --git a/templates/repo/settings/githook_edit.tmpl b/templates/repo/settings/githook_edit.tmpl
index 8c07ed0fb45..b5374032983 100644
--- a/templates/repo/settings/githook_edit.tmpl
+++ b/templates/repo/settings/githook_edit.tmpl
@@ -1,7 +1,7 @@
 {{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings edit githook")}}
 	<div class="repo-setting-content">
 		<form class="ui form" action="{{.Link}}" method="post">
-			<h4 class="ui top attached header flex-text-block tw-justify-between tw-flex-wrap">
+			<h4 class="ui top attached header flex-left-right">
 				{{.Hook.Name}}
 				<div class="tw-font-normal tw-font-sans tw-text-base">
 					{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl
index 72e204ebd37..797ce05a85b 100644
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@@ -17,7 +17,7 @@
 		<div class="ui list">
 			{{range .History}}
 				<div class="item">
-					<div class="flex-text-block tw-justify-between">
+					<div class="flex-left-right">
 						<div class="flex-text-inline">
 							{{if .IsSucceed}}
 								<span class="tw-text-green">{{svg "octicon-check"}}</span>
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 59243bf6840..9f936afb8e0 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -13,7 +13,7 @@
 	{{end}}
 
 	{{if not .ReadmeInList}}
-		<div id="repo-file-commit-box" class="ui segment list-header tw-mb-4 tw-flex tw-justify-between">
+		<div id="repo-file-commit-box" class="ui segment list-header tw-mb-4 flex-left-right">
 			{{template "repo/latest_commit" .}}
 			{{if .LatestCommit}}
 				{{if .LatestCommit.Committer}}
@@ -25,7 +25,7 @@
 		</div>
 	{{end}}
 
-	<h4 class="file-header ui top attached header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
+	<h4 class="file-header ui top attached header flex-left-right">
 		<div class="file-header-left tw-flex tw-items-center tw-py-2 tw-pr-4">
 			{{if .ReadmeInList}}
 				{{svg "octicon-book" 16 "tw-mr-2"}}
diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
index 82c4e2f8ac0..c09b8759ddc 100644
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div class="ui header flex-text-block tw-justify-between">
+		<div class="ui header flex-left-right">
 			{{ctx.Locale.Tr "repo.wiki.new_page"}}
 			{{if .PageIsWikiEdit}}
 				<a class="ui tiny primary button" href="{{.RepoLink}}/wiki?action=_new">{{ctx.Locale.Tr "repo.wiki.new_page_button"}}</a>
diff --git a/templates/repo/wiki/pages.tmpl b/templates/repo/wiki/pages.tmpl
index 120c1cda323..efa97103cc4 100644
--- a/templates/repo/wiki/pages.tmpl
+++ b/templates/repo/wiki/pages.tmpl
@@ -2,7 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository wiki pages">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<h2 class="ui header tw-flex tw-items-center tw-justify-between">
+		<h2 class="ui header flex-left-right">
 			<span>{{ctx.Locale.Tr "repo.wiki.pages"}}</span>
 			<span>
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index 108e3789378..c59047a6404 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="ui dividing header flex-text-block tw-flex-wrap tw-justify-between">
+		<div class="ui dividing header flex-left-right">
 			<div class="flex-text-block">
 				<a class="ui basic button tw-px-3" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}">{{svg "octicon-home"}}</a>
 				<div class="tw-flex-1 gt-ellipsis">
diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl
index 4e0bd9570ba..b6a5f1b955c 100644
--- a/templates/shared/searchbottom.tmpl
+++ b/templates/shared/searchbottom.tmpl
@@ -1,5 +1,5 @@
 {{if or .result.Language (not .result.UpdatedUnix.IsZero)}}
-<div class="ui bottom attached table segment tw-flex tw-items-center tw-justify-between">
+<div class="ui bottom attached table segment flex-left-right">
 		<div class="tw-flex tw-items-center tw-ml-4">
 			{{if .result.Language}}
 					<i class="color-icon tw-mr-2" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index 8a28f8dc620..a724ab725dd 100644
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -3,7 +3,7 @@
 		{{$statusUnread := 1}}{{$statusRead := 2}}{{$statusPinned := 3}}
 		{{$notificationUnreadCount := call .PageGlobalData.GetNotificationUnreadCount}}
 		{{$pageTypeIsRead := eq $.PageType "read"}}
-		<div class="flex-text-block tw-justify-between tw-mb-[--page-spacing]">
+		<div class="flex-left-right tw-mb-[--page-spacing]">
 			<div class="small-menu-items ui compact tiny menu">
 				<a class="{{if not $pageTypeIsRead}}active{{end}} item" href="{{AppSubUrl}}/notifications?type=unread">
 					{{ctx.Locale.Tr "notification.unread"}}
diff --git a/templates/user/notification/notification_subscriptions.tmpl b/templates/user/notification/notification_subscriptions.tmpl
index e4dd27e63bf..79abcbeb4d6 100644
--- a/templates/user/notification/notification_subscriptions.tmpl
+++ b/templates/user/notification/notification_subscriptions.tmpl
@@ -11,7 +11,7 @@
 		</div>
 		<div class="ui top attached segment">
 			{{if eq .Status 1}}
-				<div class="tw-flex tw-justify-between">
+				<div class="flex-left-right">
 					<div class="tw-flex">
 						<div class="small-menu-items ui compact tiny menu">
 							<a class="{{if eq .State "all"}}active {{end}}item" href="?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
@@ -27,8 +27,7 @@
 							</a>
 						</div>
 					</div>
-					<div class="tw-flex tw-justify-between">
-						<div class="ui secondary filter menu labels">
+					<div class="ui secondary menu tw-m-0">
 							<!-- Type -->
 								<div class="ui dropdown type jump item">
 									<span class="text">
@@ -60,7 +59,6 @@
 								</div>
 							</div>
 						</div>
-					</div>
 				</div>
 				<div class="divider"></div>
 				{{if not .Issues}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 49ce6565c78..08033e4a6f0 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -873,7 +873,7 @@ table th[data-sortt-desc] .svg {
   gap: var(--gap-block);
 }
 
-/* TODO: use this to replace all existing "flex + justify-between" (there are quite a lot) */
+/* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */
 .flex-left-right {
   display: flex;
   flex-wrap: wrap;
@@ -883,15 +883,6 @@ table th[data-sortt-desc] .svg {
   min-width: 0;
 }
 
-/* TODO: use this to replace all existing "flex + wrap" and (there are quite a lot of) */
-.flex-center-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--gap-block);
-  min-width: 0;
-}
-
 .ui.list.flex-items-block > .item,
 .ui.vertical.menu.flex-items-block > .item,
 .ui.form .field > label.flex-text-block, /* override fomantic "block" style */
@@ -903,6 +894,7 @@ table th[data-sortt-desc] .svg {
   min-width: 0;
 }
 
+.flex-left-right > .ui.button,
 .flex-text-block > .ui.button,
 .flex-text-inline > .ui.button {
   margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index 6cba3c51091..97ce07cc350 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -144,7 +144,7 @@ const options: ChartOptions<'line'> = {
 
 <template>
   <div>
-    <div class="ui header tw-flex tw-items-center tw-justify-between">
+    <div class="ui header">
       {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
     </div>
     <div class="tw-flex ui segment main-graph">
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
index fe2592be08c..db2f84ecde4 100644
--- a/web_src/js/components/RepoContributors.vue
+++ b/web_src/js/components/RepoContributors.vue
@@ -339,7 +339,7 @@ export default defineComponent({
 </script>
 <template>
   <div>
-    <div class="ui header tw-flex tw-items-center tw-justify-between">
+    <div class="ui header flex-left-right">
       <div>
         <relative-time
           v-if="xAxisMin && xAxisMin > 0"
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index 12b54cc87f4..7eb5c7f289b 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -122,7 +122,7 @@ const options: ChartOptions<'bar'> = {
 
 <template>
   <div>
-    <div class="ui header tw-flex tw-items-center tw-justify-between">
+    <div class="ui header">
       {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
     </div>
     <div class="tw-flex ui segment main-graph">
diff --git a/web_src/js/features/repo-issue-content.ts b/web_src/js/features/repo-issue-content.ts
index c0c6f1d5351..885a773f87c 100644
--- a/web_src/js/features/repo-issue-content.ts
+++ b/web_src/js/features/repo-issue-content.ts
@@ -14,7 +14,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
   const elDetailDialog = createElementFromHTML(`
 <div class="ui modal content-history-detail-dialog">
   ${svg('octicon-x', 16, 'close icon inside')}
-  <div class="header tw-flex tw-items-center tw-justify-between">
+  <div class="header flex-left-right">
     <div>${itemTitleHtml}</div>
     <div class="ui dropdown dialog-header-options tw-mr-8 tw-hidden">
       ${i18nTextOptions}