diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-22 12:57:02 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-22 12:57:02 +0800 |
| commit | 7934602a4ccaba7f398490ca739988a0b6f5ca2a (patch) | |
| tree | f81981a2082b0dd9f953ca0ff023f0c03847f8a5 /web_src/css | |
| parent | 23addde28ebd69ef2c1cec6a63123c87ec8bffe9 (diff) | |
| download | gitea-7934602a4ccaba7f398490ca739988a0b6f5ca2a.tar.gz gitea-7934602a4ccaba7f398490ca739988a0b6f5ca2a.zip | |
Improve some flex layouts (#26649)
Fix #26617
1. Separate the "flex-list" examples into a dedicated template, and add some more examples
2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively
3. Some `flex-wrap: wrap;` are removed
Diffstat (limited to 'web_src/css')
| -rw-r--r-- | web_src/css/base.css | 2 | ||||
| -rw-r--r-- | web_src/css/shared/flex-list.css | 6 |
2 files changed, 3 insertions, 5 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css index f2b4d3d98c..78609ab0de 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg { .flex-text-inline { display: inline-flex; align-items: center; - flex-wrap: wrap; gap: .25rem; vertical-align: middle; } @@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg { .flex-text-block { display: flex; align-items: center; - flex-wrap: wrap; gap: .25rem; } diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 7982241684..ec22fbba9e 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -29,7 +29,7 @@ display: flex; flex-direction: column; flex-grow: 1; - min-width: 0; + flex-basis: 60%; } .flex-item-header { @@ -54,7 +54,6 @@ flex-grow: 0; flex-wrap: wrap; justify-content: end; - flex-shrink: 2; } .flex-item .flex-item-title { @@ -65,8 +64,8 @@ max-width: 100%; color: var(--color-text); font-size: 16px; - min-width: 0; font-weight: var(--font-weight-semibold); + word-break: break-word; } .flex-item .flex-item-title a { @@ -81,6 +80,7 @@ flex-wrap: wrap; gap: .25rem; color: var(--color-text-light-2); + word-break: break-word; } .flex-item .flex-item-body a { |