oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve flex ellipsis (#30479)

![image](https://github.com/go-gitea/gitea/assets/2114189/857794d8-2170-42be-a5bf-47ebacbafebd)

---------

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit b84baf21fa19521e1ab303a60918c74f85fcad1c)

Conflicts:
- web_src/css/base.css
Trivial commit resolved by removing the conflicting part.
(it conflicted because we did not pick a previous PR)

authored by

wxiaoguang
silverwind and committed by
Gergely Nagy 9f8ebe48 b122c6ef

+31
+27
templates/devtest/label.tmpl
··· 1 + {{template "base/head" .}} 2 + <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> 3 + <div class="page-content devtest ui container"> 4 + <div> 5 + <h1>Label</h1> 6 + <div class="flex-text-block tw-my-2"> 7 + <span class="ui label">simple label</span> 8 + <span class="ui red label">red label</span> 9 + <span class="ui green label">green label</span> 10 + </div> 11 + <div class="flex-text-block tw-my-2"> 12 + <span class="ui basic label">basic label</span> 13 + <span class="ui basic red label">basic red label</span> 14 + <span class="ui basic green label">basic green label</span> 15 + </div> 16 + <div class="flex-text-block tw-my-2"> 17 + <span class="ui label">long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span> 18 + </div> 19 + <div class="flex-text-block tw-my-2"> 20 + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> 21 + </div> 22 + <div class="tw-my-2"> 23 + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> 24 + </div> 25 + </div> 26 + </div> 27 + {{template "base/footer" .}}
+2
web_src/css/base.css
··· 1562 1562 align-items: center; 1563 1563 gap: .25rem; 1564 1564 vertical-align: middle; 1565 + min-width: 0; 1565 1566 } 1566 1567 1567 1568 .ui.ui.button { ··· 1582 1583 display: flex; 1583 1584 align-items: center; 1584 1585 gap: .25rem; 1586 + min-width: 0; 1585 1587 }
+2
web_src/css/modules/label.css
··· 5 5 display: inline-flex; 6 6 align-items: center; 7 7 gap: .25rem; 8 + min-width: 0; 9 + max-width: 100%; /* since we are using "flex" to align label contents, we also need to limit the x-axis, a label shouldn't be wider than 100% */ 8 10 vertical-align: middle; 9 11 line-height: 1; 10 12 background: var(--color-label-bg);