Use flex to align SVG and text (#25163)

The code can be as simple as:

```html
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
<div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div>
```


![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465)

---------

Co-authored-by: Giteabot <teabot@gitea.io>

templates/devtest/gitea-ui.tmpl

@@ -128,6 +128,106 @@
 		<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
 	</div>
 
+	<div>
+		<h1>SVG alignment</h1>
+
+		<h2>Text with SVG</h2>
+		<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
+		<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
+		<div class="flex-items-block">
+			<div class="item">{{svg "octicon-alert"}} flex every line</div>
+			<div class="item">{{svg "octicon-alert"}} flex every item</div>
+		</div>
+
+		<h2>Button with SVG</h2>
+		<div>
+			<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
+			<div class="ui labeled button">
+				<button class="ui basic button">labeled button</button>
+				<a class="ui basic label">123</a>
+			</div>
+		</div>
+
+		<h2>Input with SVG</h2>
+		<div>
+			<div class="ui icon search input">
+				<i class="icon">{{svg "octicon-search"}}</i>
+				<input type="text" placeholder="place holder">
+			</div>
+		</div>
+
+		<h2>Dropdown with SVG</h2>
+		<div>
+			<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
+				<span class="text">simple</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui button dropdown">
+				<span class="text">button dropdown</span>
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui search selection dropdown">
+				<span class="text">search ...</span>
+				<input name="value" class="search">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui multiple selection dropdown">
+				<input class="hidden" value="1">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="default text">empty multiple dropdown</div>
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui multiple clearable search selection dropdown">
+				<input type="hidden" value="1">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="default text">clearable search dropdown</div>
+				<div class="menu">
+					<div class="item" data-value="1">item</div>
+				</div>
+			</div>
+			<div class="ui buttons">
+				<button class="ui button">Button with Dropdown</button>
+				<div class="ui dropdown button icon">
+					{{svg "octicon-triangle-down"}}
+					<div class="menu">
+						<div class="item">item</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div>
+			<div class="ui dropdown mini button">
+				<span class="text">small dropdown</span>
+				{{svg "octicon-triangle-down" 12 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+			<div class="ui dropdown large button">
+				<span class="text">large dropdown</span>
+				{{svg "octicon-triangle-down" 18 "dropdown icon"}}
+				<div class="menu">
+					<div class="item">item</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<div>
 		<h1>ComboMarkdownEditor</h1>
 		<div>ps: no JS code attached, so just a layout</div>

templates/repo/commits_list_small.tmpl

@@ -6,9 +6,7 @@
 	<div class="singular-commit" id="{{$tag}}">
 		<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
 		{{if .User}}
-			<a href="{{.User.HomeLink}}">
-				{{avatar $.root.Context .User}}
-			</a>
+			<a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a>
 		{{else}}
 			{{avatarByEmail $.root.Context .Author.Email .Author.Name}}
 		{{end}}

templates/repo/diff/compare.tmpl

@@ -44,7 +44,7 @@
 			</div>
 			<div class="menu">
 				<div class="ui icon search input">
-					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+					<i class="icon">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
 				<div class="header">
@@ -113,7 +113,7 @@
 			</div>
 			<div class="menu">
 				<div class="ui icon search input">
-					<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+					<i class="icon">{{svg "octicon-filter" 16}}</i>
 					<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 				</div>
 				<div class="header">

templates/repo/issue/branch_selector_field.tmpl

@@ -12,7 +12,7 @@
 	</div>
 	<div class="menu">
 		<div class="ui icon search input">
-			<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+			<i class="icon">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
 		</div>
 		<div class="header">

templates/repo/issue/view_content/pull.tmpl

@@ -22,13 +22,13 @@
 	<div class="content">
 		{{template "repo/pulls/status" .}}
 		{{$showGeneralMergeForm := false}}
-		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
+		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
 			{{if .Issue.PullRequest.HasMerged}}
 				{{if .IsPullBranchDeletable}}
 					<div class="item item-section text gt-f1">
 						<div class="item-section-left">
 							<h3 class="gt-mb-3">
-									{{$.locale.Tr "repo.pulls.merged_success"}}
+								{{$.locale.Tr "repo.pulls.merged_success"}}
 							</h3>
 							<div class="merge-section-info">
 								{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
@@ -58,93 +58,91 @@
 					{{end}}
 				</div>
 			{{else if .IsPullFilesConflicted}}
-				<div class="item text">
+				<div class="item">
 					{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.files_conflicted"}}
-					<ul>
-						{{range .ConflictedFiles}}
-							<li>{{.}}</li>
-						{{end}}
-					</ul>
 				</div>
+				<ul>
+					{{range .ConflictedFiles}}
+					<li>{{.}}</li>
+					{{end}}
+				</ul>
 			{{else if .IsPullRequestBroken}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+					{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.data_broken"}}
 				</div>
 			{{else if .IsPullWorkInProgress}}
-				<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
-					<div>
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+				<div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
+					<div class="item-section-left flex-text-inline gt-f1">
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
 					</div>
-					<div>
-						{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
-							<button class="ui compact button">
-								{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
-							</button>
-						{{end}}
-					</div>
+					{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
+						<button class="ui compact button">
+							{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
+						</button>
+					{{end}}
 				</div>
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 			{{else if .Issue.PullRequest.IsChecking}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
+					{{svg "octicon-sync"}}
 					{{$.locale.Tr "repo.pulls.is_checking"}}
 				</div>
 			{{else if .Issue.PullRequest.IsAncestor}}
 				<div class="item">
-					<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+					{{svg "octicon-alert"}}
 					{{$.locale.Tr "repo.pulls.is_ancestor"}}
 				</div>
 			{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
 				{{if .IsBlockedByApprovals}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
 					</div>
 				{{else if .IsBlockedByRejection}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
 					</div>
 				{{else if .IsBlockedByOfficialReviewRequests}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 					{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
-						<ul>
-							{{range .ChangedProtectedFiles}}
-								<li>{{.}}</li>
-							{{end}}
-						</ul>
 					</div>
+					<ul>
+						{{range .ChangedProtectedFiles}}
+						<li>{{.}}</li>
+						{{end}}
+					</ul>
 				{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
 					</div>
 				{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
 					</div>
 				{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
 					</div>
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
+						{{svg "octicon-unlock"}}
 						{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
 					</div>
 				{{end}}
@@ -158,23 +156,23 @@
 				{{if $canMergeNow}}
 					{{if $notAllOverridableChecksOk}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
+							{{svg "octicon-dot-fill"}}
 							{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
 						</div>
 					{{else}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
+							{{svg "octicon-check"}}
 							{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
 						</div>
 					{{end}}
 					{{if .WillSign}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
+							{{svg "octicon-lock" 16 "text green"}}
 							{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
 						</div>
 					{{else if .IsSigned}}
 						<div class="item">
-							<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
+							{{svg "octicon-unlock"}}
 							{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
 						</div>
 					{{end}}
@@ -184,7 +182,7 @@
 					<div class="ui divider"></div>
 
 					<div class="item">
-						<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+						{{svg "octicon-alert"}}
 						{{$.locale.Tr "repo.pulls.is_empty"}}
 					</div>
 				{{end}}
@@ -315,19 +313,19 @@
 					</div>
 				{{else if .IsBlockedByOutdatedBranch}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
-					{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
+						{{svg "octicon-x"}}
+						{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
 					</div>
 				{{else if .IsBlockedByChangedProtectedFiles}}
 					<div class="item text red">
-						<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
+						{{svg "octicon-x"}}
 						{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
-						<ul>
-							{{range .ChangedProtectedFiles}}
-								<li>{{.}}</li>
-							{{end}}
-						</ul>
 					</div>
+					<ul>
+						{{range .ChangedProtectedFiles}}
+						<li>{{.}}</li>
+						{{end}}
+					</ul>
 				{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
 					<div class="item text red">
 						{{svg "octicon-x"}}

templates/repo/issue/view_content/sidebar.tmpl

@@ -273,7 +273,7 @@
 				<form method="POST" action="{{.Issue.Link}}/watch">
 					<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
 					{{$.CsrfTokenHtml}}
-					<button class="fluid ui button gt-df gt-jc">
+					<button class="fluid ui button">
 						{{if $.IssueWatch.IsWatching}}
 							{{svg "octicon-mute" 16 "gt-mr-3"}}
 							{{.locale.Tr "repo.issues.unsubscribe"}}
@@ -558,7 +558,7 @@
 		{{if or .PinEnabled .Issue.IsPinned}}
 			<form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
 				{{$.CsrfTokenHtml}}
-				<button class="fluid ui button gt-df gt-jc {{if not $.NewPinAllowed}}disabled{{end}}">
+				<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
 					{{if not .Issue.IsPinned}}
 						{{svg "octicon-pin" 16 "gt-mr-3"}}
 						{{.locale.Tr "pin"}}

templates/repo/issue/view_content/update_branch_by_merge.tmpl

@@ -1,8 +1,8 @@
 {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
 	<div class="ui divider"></div>
 	<div class="item item-section">
-		<div class="item-section-left">
-			<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
+		<div class="item-section-left flex-text-inline">
+			{{svg "octicon-alert"}}
 			{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
 		</div>
 		<div class="item-section-right">
@@ -14,9 +14,8 @@
 								{{$.locale.Tr "repo.pulls.update_branch"}}
 							</span>
 						</button>
-
-						<div class="ui dropdown icon button no-text">
-							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+						<div class="ui dropdown icon button">
+							{{svg "octicon-triangle-down"}}
 							<div class="menu">
 								<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
 								<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>

templates/repo/issue/view_title.tmpl

@@ -84,7 +84,7 @@
 							</div>
 							<div class="menu">
 								<div class="ui icon search input">
-									<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+									<i class="icon">{{svg "octicon-filter" 16}}</i>
 									<input name="search" placeholder="{{.locale.Tr "repo.pulls.filter_branch"}}...">
 								</div>
 								<div class="scrolling menu" id="branch-select">

templates/repo/release_tag_header.tmpl

@@ -3,7 +3,7 @@
 
 {{if $canReadReleases}}
 	<div class="gt-df">
-		<div class="gt-f1">
+		<div class="gt-f1 gt-df gt-ac">
 			<h2 class="ui compact small menu header small-menu-items">
 				<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
 				{{if $canReadCode}}

templates/repo/wiki/view.tmpl

@@ -15,7 +15,7 @@
 					</div>
 					<div class="menu">
 						<div class="ui icon search input">
-							<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
+							<i class="icon">{{svg "octicon-filter" 16}}</i>
 							<input name="search" placeholder="{{.locale.Tr "repo.wiki.filter_page"}}...">
 						</div>
 						<div class="scrolling menu">

web_src/css/base.css

@@ -1031,10 +1031,6 @@ img.ui.avatar,
   background: var(--color-active);
 }
 
-.ui.form .field > .selection.dropdown > .dropdown.icon {
-  height: auto;
-}
-
 .ui.loading.segment::before,
 .ui.loading.form::before {
   background: none;
@@ -2124,35 +2120,6 @@ table th[data-sortt-desc] .svg {
   margin-left: 0.25rem;
 }
 
-.ui.dropdown .svg.dropdown.icon,
-.ui.dropdown .svg.remove.icon,
-.svg.dropdown.icon {
-  margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
-  margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
-  height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
-}
-
-.ui.selection.dropdown > .svg.search.icon,
-.ui.selection.dropdown > .svg.delete.icon,
-.ui.selection.dropdown > .svg.dropdown.icon {
-  top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
-}
-
-.ui.selection.dropdown > .svg.remove.icon {
-  top: .5px;
-  right: 32px;
-  width: auto;
-}
-
-.ui.selection.dropdown > .svg.remove.icon:hover {
-  opacity: 1;
-}
-
-.ui.dropdown.no-text > .dropdown.icon {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 .ui.dropdown .menu .item {
   border-radius: 0;
 }
@@ -2304,3 +2271,78 @@ table th[data-sortt-desc] .svg {
   width: 15px;
   height: 15px;
 }
+
+.ui.dropdown {
+  line-height: 1em; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
+}
+
+/* dropdown has some kinds of icons:
+- "> .dropdown.icon": the arrow for opening the dropdown
+- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
+- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
+*/
+
+/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
+.ui.ui.dropdown > .icon.icon {
+  position: initial; /* plain dropdown and button dropdown use flex layout for icons */
+  padding: 0;
+  margin: 0;
+  height: auto;
+}
+
+.ui.ui.dropdown > .icon.icon:hover {
+  opacity: 1;
+}
+
+.ui.ui.button.dropdown > .icon.icon,
+.ui.ui.selection.dropdown > .icon.icon {
+  position: absolute; /* selection dropdown uses absolute layout for icons */
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ui.ui.dropdown > .dropdown.icon {
+  right: 0.5em;
+}
+
+.ui.ui.dropdown > .remove.icon {
+  right: 2em;
+}
+
+.ui.ui.button,
+.ui.ui.dropdown,
+.flex-items-inline > .item,
+.flex-text-inline {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .25rem;
+  vertical-align: middle;
+}
+
+.ui.ui.button {
+  justify-content: center;
+}
+
+.ui.dropdown .ui.label .svg {
+  vertical-align: middle;
+}
+
+.ui.ui.labeled.button {
+  gap: 0;
+  align-items: stretch;
+}
+
+.ui.ui.icon.input .icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-items-block > .item,
+.flex-text-block {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .25rem;
+}

web_src/css/modules/button.css

@@ -24,10 +24,6 @@
   color: var(--color-text);
 }
 
-.ui.button.no-text .icon {
-  margin: 0 !important;
-}
-
 .delete-button,
 .delete-button:hover {
   color: var(--color-red);

web_src/css/repo.css

@@ -20,15 +20,6 @@
   margin-top: 2px;
 }
 
-.repository .repo-header .repo-buttons .svg {
-  margin: 0 0.42857143em 0 -0.21428571em;
-}
-
-.repository .repo-header .button {
-  margin-top: 2px;
-  margin-bottom: 2px;
-}
-
 .repository .tabs .navbar {
   justify-content: initial;
 }
@@ -850,6 +841,11 @@
   padding-top: 0;
 }
 
+.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
+.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
+  margin-right: 0.25em;
+}
+
 .repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
   line-height: 34px; /* this must be same as .badge height, to avoid overflow */
   clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
@@ -2537,11 +2533,6 @@
   margin-left: 0.25rem;
 }
 
-.content-history-menu .octicon-triangle-down {
-  position: relative;
-  top: 1.5px;
-}
-
 .comment-body {
   background: var(--color-box-body);
   border: none !important;
@@ -2874,6 +2865,7 @@ tbody.commit-list {
   flex-direction: row;
   flex-wrap: wrap;
   word-break: keep-all;
+  gap: 0.25em;
 }
 
 @media (max-width: 767.98px) {
@@ -2897,15 +2889,6 @@ tbody.commit-list {
   color: var(--color-primary-dark-1);
 }
 
-.repo-buttons .ui.labeled.button {
-  cursor: initial;
-}
-
-.repo-buttons .ui.labeled.button > .label {
-  border-left: 0 !important;
-  margin: 0 !important;
-}
-
 .repo-buttons .ui.labeled.button.disabled {
   pointer-events: inherit !important;
 }

web_src/js/components/DashboardRepoList.vue

@@ -19,7 +19,7 @@
           <input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
-            <i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
+            <svg-icon name="octicon-filter" :size="16"/>
             <div class="menu">
               <a class="item" @click="toggleArchivedFilter()">
                 <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">

web_src/js/components/PullRequestMergeForm.vue

@@ -72,7 +72,7 @@
             </template>
           </span>
         </button>
-        <div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
+        <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
           <svg-icon name="octicon-triangle-down" :size="14"/>
           <div class="menu" :class="{'show':showMergeStyleMenu}">
             <template v-for="msd in mergeForm.mergeStyles">

web_src/js/components/RepoBranchTagSelector.vue

@@ -13,7 +13,7 @@
     </button>
     <div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
       <div class="ui icon search input">
-        <i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
+        <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
         <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
       </div>
       <template v-if="showBranchesInDropdown">

web_src/js/features/repo-issue-content.js

@@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
 function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
   const $headerLeft = $item.find('.comment-header-left');
   const menuHtml = `
-  <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
-    &bull; <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
+  <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
+    &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
     <div class="menu">
     </div>
   </div>`;