From 07a031dfd5cb661e0859ac716a4c5f917164e6ec Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 22 Aug 2023 10:20:16 +0800
Subject: [PATCH 1/2] fix

---
 templates/devtest/flex-list.tmpl | 91 ++++++++++++++++++++++++++++++++
 templates/devtest/gitea-ui.tmpl  | 63 ++--------------------
 web_src/css/base.css             |  2 -
 web_src/css/shared/flex-list.css |  3 +-
 4 files changed, 97 insertions(+), 62 deletions(-)
 create mode 100644 templates/devtest/flex-list.tmpl

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
new file mode 100644
index 0000000000000..5d64437412c96
--- /dev/null
+++ b/templates/devtest/flex-list.tmpl
@@ -0,0 +1,91 @@
+{{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+<div class="page-content devtest ui container">
+	<div>
+		<h1>Flex List</h1>
+		<div class="flex-list">
+			<div class="flex-item">
+				<div class="flex-item-leading">
+					{{svg "octicon-info" 32}}
+				</div>
+				<div class="flex-item-main">
+					<div class="flex-item-title">
+						Flex Item
+						<span class="ui basic label">
+							with label
+						</span>
+					</div>
+					<div class="flex-item-body">
+						consists of leading/main/trailing part
+					</div>
+					<div class="flex-item-body">
+						main part contains title and (multiple) body lines
+					</div>
+				</div>
+				<div class="flex-item-trailing">
+					<button class="ui tiny red button">
+						{{svg "octicon-warning" 14}} CJK文本测试
+					</button>
+					<button class="ui tiny green button">
+						{{svg "octicon-info" 14}} Button
+					</button>
+					<button class="ui tiny green button">
+						Button with long text
+					</button>
+				</div>
+			</div>
+
+			<div class="flex-item">
+				<div class="flex-item-leading">
+					{{svg "octicon-info" 32}}
+				</div>
+				<div class="flex-item-main">
+					<div class="flex-item-title">
+						Flex Item
+						<span class="ui basic label">
+							with label
+						</span>
+					</div>
+					<div class="flex-item-body">
+						consists of leading/main/trailing part
+					</div>
+					<div class="flex-item-body">
+						main part contains title and (multiple) body lines
+					</div>
+				</div>
+				<div class="flex-item-trailing">
+					<button class="ui tiny red button">
+						{{svg "octicon-warning" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
+					</button>
+				</div>
+			</div>
+
+			<div class="flex-item">
+				<div class="flex-item-leading">
+					{{svg "octicon-repo" 32}}
+				</div>
+				<div class="flex-item-main">
+					<div class="flex-item-header">
+						<div class="flex-item-title">
+							<a class="text primary" href="{{$.Link}}">
+								gitea-org / gitea
+							</a>
+							<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
+						</div>
+						<div class="flex-item-trailing">
+							<a class="muted" href="{{$.Link}}">
+								<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
+							</a>
+							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
+							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
+						</div>
+					</div>
+					<div class="flex-item-body">
+						when inside header, the trailing part will wrap below the title
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 9e15e3c1bc858..342f8c2e9b6e4 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -130,9 +130,13 @@
 		<h2>Text with SVG</h2>
 		<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
 		<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
+
+		<div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
+
 		<div class="flex-items-block">
 			<div class="item">{{svg "octicon-alert"}} flex every line</div>
 			<div class="item">{{svg "octicon-alert"}} flex every item</div>
+			<div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div>
 		</div>
 
 		<h2>Button with SVG</h2>
@@ -142,6 +146,7 @@
 				<button class="ui basic button">labeled button</button>
 				<a class="ui basic label">123</a>
 			</div>
+			<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
 		</div>
 
 		<h2>Input with SVG</h2>
@@ -253,63 +258,5 @@
 		{{template "shared/combomarkdowneditor" .}}
 	</div>
 	<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
-
-	<div>
-		<h1>Flex List</h1>
-		<div class="flex-list">
-			<div class="flex-item">
-				<div class="flex-item-leading">
-					{{svg "octicon-info" 32}}
-				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-title">
-						Flex Item
-						<span class="ui basic label">
-							with label
-						</span>
-					</div>
-					<div class="flex-item-body">
-						consists of leading/main/trailing part
-					</div>
-					<div class="flex-item-body">
-						main part contains title and (multiple) body lines
-					</div>
-				</div>
-				<div class="flex-item-trailing">
-					<button class="ui tiny red button">
-						{{svg "octicon-warning" 12}} Button
-					</button>
-					<button class="ui tiny green button">
-						{{svg "octicon-info" 12}} Button
-					</button>
-				</div>
-			</div>
-			<div class="flex-item">
-				<div class="flex-item-leading">
-					{{svg "octicon-repo" 32}}
-				</div>
-				<div class="flex-item-main">
-					<div class="flex-item-header">
-						<div class="flex-item-title">
-							<a class="text primary" href="{{$.Link}}">
-								gitea-org / gitea
-							</a>
-							<span data-tooltip-content="{{$.locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
-						</div>
-						<div class="flex-item-trailing">
-							<a class="muted" href="{{$.Link}}">
-								<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: aqua"></i>Go</span>
-							</a>
-							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
-							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
-						</div>
-					</div>
-					<div class="flex-item-body">
-						when inside header, the trailing part will wrap below the title
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index f2b4d3d98cf69..78609ab0de7db 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -2311,7 +2311,6 @@ table th[data-sortt-desc] .svg {
 .flex-text-inline {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   gap: .25rem;
   vertical-align: middle;
 }
@@ -2339,6 +2338,5 @@ table th[data-sortt-desc] .svg {
 .flex-text-block {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
   gap: .25rem;
 }
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 7982241684ef7..7e1eb4d8fc357 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -29,7 +29,6 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  min-width: 0;
 }
 
 .flex-item-header {
@@ -54,7 +53,7 @@
   flex-grow: 0;
   flex-wrap: wrap;
   justify-content: end;
-  flex-shrink: 2;
+  min-width: calc(min(40%, 200px));
 }
 
 .flex-item .flex-item-title {

From 9001757448577d45c0383f184b890f2982aa9c6d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 22 Aug 2023 10:59:34 +0800
Subject: [PATCH 2/2] use  flex-basis, add word-break

---
 templates/devtest/flex-list.tmpl | 7 ++-----
 web_src/css/shared/flex-list.css | 5 +++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl
index 5d64437412c96..37f3f04004b9c 100644
--- a/templates/devtest/flex-list.tmpl
+++ b/templates/devtest/flex-list.tmpl
@@ -41,16 +41,13 @@
 				</div>
 				<div class="flex-item-main">
 					<div class="flex-item-title">
-						Flex Item
-						<span class="ui basic label">
-							with label
-						</span>
+						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
 					</div>
 					<div class="flex-item-body">
 						consists of leading/main/trailing part
 					</div>
 					<div class="flex-item-body">
-						main part contains title and (multiple) body lines
+						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
 					</div>
 				</div>
 				<div class="flex-item-trailing">
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 7e1eb4d8fc357..ec22fbba9e21c 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -29,6 +29,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  flex-basis: 60%;
 }
 
 .flex-item-header {
@@ -53,7 +54,6 @@
   flex-grow: 0;
   flex-wrap: wrap;
   justify-content: end;
-  min-width: calc(min(40%, 200px));
 }
 
 .flex-item .flex-item-title {
@@ -64,8 +64,8 @@
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;
-  min-width: 0;
   font-weight: var(--font-weight-semibold);
+  word-break: break-word;
 }
 
 .flex-item .flex-item-title a {
@@ -80,6 +80,7 @@
   flex-wrap: wrap;
   gap: .25rem;
   color: var(--color-text-light-2);
+  word-break: break-word;
 }
 
 .flex-item .flex-item-body a {