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

@@ -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>

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>

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 {