From c32af046a232183bb6f11d236912dc1ee7a7fdee Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Tue, 14 Jul 2026 19:12:39 -0700
Subject: [PATCH] fix(org): align follow button and wrap description (#38448)
 (#38454)

Backport #38448

Co-authored-by: Shudhanshu Singh <sudhanshuwriterblc@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/devtest/flex-list.tmpl | 16 +++++++++++++---
 templates/org/header.tmpl        |  4 ++--
 web_src/css/shared/flex-list.css |  2 ++
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index 26df0920c5d..2551941f7ff 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -1,7 +1,17 @@
 {{template "devtest/devtest-header"}}
 <div class="page-content devtest">
 	<div class="ui container">
-		<h3>Flex List (standalone)</h3>
+		<h3>Flex Relaxed List</h3>
+		<div class="flex-container tw-border">
+			<div class="flex-relaxed-list tw-flex-1">
+				<div class="flex-left-right">
+					<span class="gt-ellipsis">left looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</span>
+					<span>right</span>
+				</div>
+			</div>
+		</div>
+
+		<h3>Flex Divided List (standalone)</h3>
 		<div class="divider"></div>
 		<div class="flex-divided-list items-with-main">
 			<div class="item">
@@ -87,7 +97,7 @@
 
 		<div class="divider"></div>
 
-		<h3>Flex List (with "ui segment")</h3>
+		<h3>Flex Divided List (with "ui segment")</h3>
 		<div class="ui attached segment">
 			<div class="flex-divided-list">
 				<div class="item">item 1</div>
@@ -101,7 +111,7 @@
 				<div class="item">item 2</div>
 			</div>
 		</div>
-		<h3>Flex List (with "ui segment fitted", items have their own padding)</h3>
+		<h3>Flex Divided List (with "ui segment fitted", items have their own padding)</h3>
 		<div class="ui fitted segment">
 			<div class="flex-divided-list items-px-default">
 				<div class="item">item 1</div>
diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
index 4f9e54b6109..58300edc5b6 100644
--- a/templates/org/header.tmpl
+++ b/templates/org/header.tmpl
@@ -1,6 +1,6 @@
-<div class="ui container tw-flex tw-gap-4">
+<div class="ui container flex-container">
 	<div>{{ctx.AvatarUtils.Avatar .Org 100}}</div>
-	<div class="flex-relaxed-list">
+	<div class="flex-relaxed-list tw-flex-1">
 		<div class="ui header flex-left-right tw-m-0">
 			<div class="flex-text-block">
 				<span class="tw-text-2xl">{{.Org.DisplayName}}</span>
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 99515c13428..cb6c69957af 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -3,6 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--gap-block);
+  min-width: 0; /* keep the same style as "flex-text-block" etc, make the text content wrap/ellipse correctly */
+  max-width: 100%;
 }
 
 .flex-relaxed-list > .divider {