From b84baf21fa19521e1ab303a60918c74f85fcad1c 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)

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

---------

Co-authored-by: silverwind <me@silverwind.io>
---
 templates/devtest/label.tmpl  | 27 +++++++++++++++++++++++++++
 web_src/css/base.css          |  3 +++
 web_src/css/modules/label.css |  2 ++
 3 files changed, 32 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 000000000..77590715a
--- /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 b3f87044e..8ded4aa88 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1341,6 +1341,7 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: .25rem;
   vertical-align: middle;
+  min-width: 0;
 }
 
 .ui.dropdown .ui.label .svg {
@@ -1357,6 +1358,7 @@ table th[data-sortt-desc] .svg {
   display: flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
 }
 
 /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */
@@ -1364,4 +1366,5 @@ table th[data-sortt-desc] .svg {
   display: flex !important;
   align-items: center;
   gap: .5rem;
+  min-width: 0;
 }
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 32e772ea5..696080b66 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);