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>
This commit is contained in:
Copilot
2026-04-19 18:57:48 +08:00
committed by GitHub
parent c98134033a
commit 30be22f30f
31 changed files with 39 additions and 50 deletions

View File

@@ -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 */