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>

7 files changed, 86 insertions, 65 deletions

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 879465ab7c..d2aa64e6ed 100644
--- a/web_src/css/base.css
+++ b/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;
+}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 72eb1f3989..c3728e2e26 100644
--- a/web_src/css/modules/button.css
+++ b/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);
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 99ef340177..674f8c9e67 100644
--- a/web_src/css/repo.css
+++ b/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;
 }
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 25a94c1fa7..b47d872927 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/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">
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index d6ddbef817..909ea950db 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/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">
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 2b0715a092..5d08575278 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/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">
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index 792a11c5ab..d66f6ad4a4 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/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>`;