fix

Author: wxiaoguang

templates/devtest/label.tmpl

@@ -0,0 +1,26 @@
+{{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>
+			<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>
+	</div>
+</div>
+{{template "base/footer" .}}

web_src/css/base.css

@@ -1345,6 +1345,7 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: .25rem;
   vertical-align: middle;
+  min-width: 0;
 }
 
 .ui.ui.button {
@@ -1365,11 +1366,13 @@ 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 */
 .ui.dropdown .menu.flex-items-menu > .item {
   display: flex !important;
   align-items: center;
   gap: .5rem;
+  min-width: 0;
 }

web_src/css/helpers.css

@@ -13,6 +13,7 @@ Gitea's private styles use `g-` prefix.
   overflow: hidden !important;
   white-space: nowrap !important;
   text-overflow: ellipsis !important;
+  min-width: 0;
 }
 
 .g-table-auto-ellipsis td.auto-ellipsis {

web_src/css/modules/label.css

@@ -5,6 +5,7 @@
   display: inline-flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
   vertical-align: middle;
   line-height: 1;
   background: var(--color-label-bg);