From 9c08df8bc8001fc7cb59633fefc46c43e1c34122 Mon Sep 17 00:00:00 2001
From: Shudhanshu Singh <sudhanshuwriterblc@gmail.com>
Date: Tue, 14 Jul 2026 23:24:55 +0530
Subject: [PATCH] fix(org): align follow button and wrap description (#38448)

### Description
Fixes the organization page header layout issue where:
1. Long organization descriptions did not wrap and instead stretched the
header container out of bounds.
2. The "Follow" button floated dynamically adjacent to the description's
right edge depending on the description length, instead of remaining at
a fixed position aligned with the right edge of the page container.

Fixes https://github.com/go-gitea/gitea/issues/38445
### Cause
The flex container `<div class="flex-relaxed-list">` lacked `tw-flex-1`
(to grow to fill the container) and `tw-min-w-0` (to allow it to shrink
below its content's size). Consequently, the flex minimum width
defaulted to `min-content`, stretching the container for long unwrapped
descriptions.

### Solution
Added `tw-flex-1 tw-min-w-0` to the `<div class="flex-relaxed-list">`
container in `templates/org/header.tmpl`. This restricts the width,
enables proper text wrapping, and fixes the "Follow" button to the right
edge of the content container.

### Screenshots
Before
<img width="1300" height="615" alt="image"
src="https://github.com/user-attachments/assets/11e6ab99-b847-45ff-8bdb-8622bfeee8aa"
/>
After
<img width="1300" height="615" alt="image"
src="https://github.com/user-attachments/assets/84ac0633-b192-4be5-8226-13bfad3ab2ec"
/>

---------

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 {