Fix dropdown icon misalignment when using fomantic icon (#23558) (#23577)

wxiaoguang · lunny · web-flow · commit 854fcb1434d4 · 2023-03-20T10:44:15.000+08:00
Backport #23558 There are still many dropdowns using fomantic icon. For example: new issue with issue template. Avoid polluting the fomantic styles. Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -2544,10 +2544,10 @@ table th[data-sortt-desc] .svg {
   height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
 }
 
-.ui.selection.dropdown > .search.icon,
-.ui.selection.dropdown > .delete.icon,
-.ui.selection.dropdown > .dropdown.icon {
-  top: 0 !important;
+.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.dropdown.no-text > .dropdown.icon {

Original file line number	Diff line number	Diff line change
`@@ -2544,10 +2544,10 @@ table th[data-sortt-desc] .svg {`
`2544`	`2544`	`height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */`
`2545`	`2545`	`}`
`2546`	`2546`
`2547`		`-.ui.selection.dropdown > .search.icon,`
`2548`		`-.ui.selection.dropdown > .delete.icon,`
`2549`		`-.ui.selection.dropdown > .dropdown.icon {`
`2550`		`- top: 0 !important;`
	`2547`	`+.ui.selection.dropdown > .svg.search.icon,`
	`2548`	`+.ui.selection.dropdown > .svg.delete.icon,`
	`2549`	`+.ui.selection.dropdown > .svg.dropdown.icon {`
	`2550`	`+ top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */`
`2551`	`2551`	`}`
`2552`	`2552`
`2553`	`2553`	`.ui.dropdown.no-text > .dropdown.icon {`