Feat/optimize span svg layout

[kerwin612]

before:

after:

[silverwind]

I agree, this seems to be too prone to false-positives.

I still think the best course of actions is to make Vue not output the wrapper in first place:

https://stackoverflow.com/a/69354385/808699

[wxiaoguang]

I still think the best course of actions is to make Vue not output the wrapper in first place:

The screenshots are not from Vue ......

[kerwin612]

I still think the best course of actions is to make Vue not output the wrapper in first place:

The screenshots are not from Vue ......

yes, screenshots from

gitea/templates/explore/repo_list.tmpl

Line 47 in 946fb78

<span aria-label="{{ctx.Locale.Tr "repo.forks"}}">{{svg "octicon-git-branch" 16}}</span>

There is a lot of legacy code in the system, such as <some-container><span><svg/></span>text</some-container> or <some-container><span><svg/>text</span></some-container>. In the default scenario, the SVG and the subsequent text are vertically arranged.

The goal of this PR is to make the SVG and the subsequent text vertically centered in all such scenarios across the entire system.

[wxiaoguang]

The goal of this PR is to make the SVG and the subsequent text vertically centered in all such scenarios across the entire system.

See #34185 (comment), it won't work in all scenarios, instead, it introduces more different cases.

The root problem is that you can't assume the parent has "flex" layout.

[kerwin612]

I did a global search, and it turns out the situation is much more complicated than I thought. I believe there might not be a universal solution. It seems that we really have no other choice but to address each issue as it arises.