From 9f8ebe489f150c04cfa0bc3d5b27fc6c68117aa7 Mon Sep 17 00:00:00 2001 From: wxiaoguang <wxiaoguang@gmail.com> Date: Mon, 15 Apr 2024 03:43:30 +0800 Subject: [PATCH] Improve flex ellipsis (#30479)  --------- 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) --- templates/devtest/label.tmpl | 27 +++++++++++++++++++++++++++ web_src/css/base.css | 2 ++ web_src/css/modules/label.css | 2 ++ 3 files changed, 31 insertions(+) create mode 100644 templates/devtest/label.tmpl diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl new file mode 100644 index 0000000000..77590715a1 --- /dev/null +++ b/templates/devtest/label.tmpl @@ -0,0 +1,27 @@ +{{template "base/head" .}} +<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> +<div class="page-content devtest ui container"> + <div> + <h1>Label</h1> + <div class="flex-text-block tw-my-2"> + <span class="ui label">simple label</span> + <span class="ui red label">red label</span> + <span class="ui green label">green label</span> + </div> + <div class="flex-text-block tw-my-2"> + <span class="ui basic label">basic label</span> + <span class="ui basic red label">basic red label</span> + <span class="ui basic green label">basic green label</span> + </div> + <div class="flex-text-block tw-my-2"> + <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> + </div> + <div class="flex-text-block tw-my-2"> + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> + </div> + <div class="tw-my-2"> + <span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span> + </div> + </div> +</div> +{{template "base/footer" .}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 06542c652e..d2788babb9 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1562,6 +1562,7 @@ table th[data-sortt-desc] .svg { align-items: center; gap: .25rem; vertical-align: middle; + min-width: 0; } .ui.ui.button { @@ -1582,4 +1583,5 @@ table th[data-sortt-desc] .svg { display: flex; align-items: center; gap: .25rem; + min-width: 0; } diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 32e772ea5b..696080b667 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -5,6 +5,8 @@ display: inline-flex; align-items: center; gap: .25rem; + min-width: 0; + 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% */ vertical-align: middle; line-height: 1; background: var(--color-label-bg);