From 6fced335817a23f5a37a601c7f1ebf111821fa32 Mon Sep 17 00:00:00 2001
From: charles <30816317+charles7668@users.noreply.github.com>
Date: Sun, 13 Oct 2024 10:43:43 +0800
Subject: [PATCH] Fix dropdown content overflow (#31610)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #31602

![圖片](https://github.com/go-gitea/gitea/assets/30816317/43722917-bc5e-4e06-b0de-db52552a20df)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/devtest/fomantic-dropdown.tmpl | 40 ++++++++++++++++++------
 web_src/css/base.css                     |  4 +++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl
index 57a7c1313ea..0b9d227220b 100644
--- a/templates/devtest/fomantic-dropdown.tmpl
+++ b/templates/devtest/fomantic-dropdown.tmpl
@@ -29,15 +29,16 @@
 				<div class="default text">empty multiple dropdown</div>
 				<div class="menu">
 					<div class="item">item</div>
-				</div>
-			</div>
-			<div class="ui multiple clearable search selection dropdown">
-				<input type="hidden" value="1">
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-				{{svg "octicon-x" 14 "remove icon"}}
-				<div class="default text">clearable search dropdown</div>
-				<div class="menu">
-					<div class="item" data-value="1">item</div>
+					<div class="item">sm1</div>
+					<div class="item">sm2</div>
+					<div class="item">medium1</div>
+					<div class="item">medium2</div>
+					<div class="item">large item1</div>
+					<div class="item">large item2</div>
+					<div class="item">large item3</div>
+					<div class="item">very large item test 1</div>
+					<div class="item">very large item test 2</div>
+					<div class="item">very large item test 3</div>
 				</div>
 			</div>
 			<div class="ui buttons">
@@ -50,6 +51,27 @@
 				</div>
 			</div>
 		</div>
+		<div>
+			<div class="ui multiple clearable search selection dropdown tw-max-w-[220px]">
+				<input type="hidden" value="1,2,3,4,5,10">
+				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+				{{svg "octicon-x" 14 "remove icon"}}
+				<div class="default text">clearable search dropdown</div>
+				<div class="menu">
+					<div class="item" data-value="1">item</div>
+					<div class="item" data-value="2">sm1</div>
+					<div class="item" data-value="3">sm2</div>
+					<div class="item" data-value="4">medium1</div>
+					<div class="item" data-value="5">medium2</div>
+					<div class="item" data-value="6">large item1</div>
+					<div class="item" data-value="7">large item2</div>
+					<div class="item" data-value="8">large item3</div>
+					<div class="item" data-value="9">very large item test 1</div>
+					<div class="item" data-value="10">very large item test 2</div>
+					<div class="item" data-value="11">very large item test 3</div>
+				</div>
+			</div>
+		</div>
 
 		<h2>Selection</h2>
 		<div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 223d9fbad65..8d9f810ef8f 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1364,6 +1364,10 @@ table th[data-sortt-desc] .svg {
   min-width: 0; /* make ellipsis work */
 }
 
+.ui.multiple.selection.dropdown {
+  flex-wrap: wrap;
+}
+
 .ui.ui.dropdown.selection {
   min-width: 14em; /* match the default min width */
 }