From d4978e937a853e28647756eae03b04c6b0d06872 Mon Sep 17 00:00:00 2001
From: charles <charles76680119@gmail.com>
Date: Thu, 11 Jul 2024 09:44:09 +0800
Subject: [PATCH 1/7] Fix dropdown content overflow

---
 web_src/css/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 223d9fbad6..f65e64fe21 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1362,6 +1362,7 @@ table th[data-sortt-desc] .svg {
   gap: .25rem;
   vertical-align: middle;
   min-width: 0; /* make ellipsis work */
+  flex-wrap: wrap;
 }
 
 .ui.ui.dropdown.selection {

From bd532297742f02593b0d752d62719574e3f10136 Mon Sep 17 00:00:00 2001
From: charles <charles76680119@gmail.com>
Date: Fri, 12 Jul 2024 09:33:05 +0800
Subject: [PATCH 2/7] Use tw-flex-wrap in the dropdown div that might overflow.

---
 templates/repo/create.tmpl        | 2 +-
 templates/repo/graph.tmpl         | 2 +-
 templates/repo/settings/tags.tmpl | 2 +-
 web_src/css/base.css              | 1 -
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index 2e1de244ea..d5e652e396 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -135,7 +135,7 @@
 
 						<div class="inline field">
 							<label>.gitignore</label>
-							<div class="ui multiple search selection dropdown">
+							<div class="ui multiple search selection dropdown tw-flex-wrap">
 								<input type="hidden" name="gitignores" value="{{.gitignores}}">
 								<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
 								<div class="menu">
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 9eb4bd4ecb..5d0222f858 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -6,7 +6,7 @@
 			<h2 class="ui header dividing">
 				{{ctx.Locale.Tr "repo.commit_graph"}}
 				<div class="ui icon buttons tiny color-buttons">
-					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
+					<div class="ui multiple selection search dropdown tw-flex-wrap" id="flow-select-refs-dropdown">
 						<input type="hidden" name="flow">
 						<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl
index c9efb7b67e..91107e22a7 100644
--- a/templates/repo/settings/tags.tmpl
+++ b/templates/repo/settings/tags.tmpl
@@ -26,7 +26,7 @@
 								</div>
 								<div class="whitelist field">
 									<label>{{ctx.Locale.Tr "repo.settings.tags.protection.allowed.users"}}</label>
-									<div class="ui multiple search selection dropdown">
+									<div class="ui multiple search selection dropdown tw-flex-wrap">
 										<input type="hidden" name="allowlist_users" value="{{.allowlist_users}}">
 										<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 										<div class="menu">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index f65e64fe21..223d9fbad6 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1362,7 +1362,6 @@ table th[data-sortt-desc] .svg {
   gap: .25rem;
   vertical-align: middle;
   min-width: 0; /* make ellipsis work */
-  flex-wrap: wrap;
 }
 
 .ui.ui.dropdown.selection {

From 7d68f34619c594b4c7972feb9d1fb46f96b4ed38 Mon Sep 17 00:00:00 2001
From: charles7668 <charles76680119@gmail.com>
Date: Sat, 13 Jul 2024 07:14:21 +0800
Subject: [PATCH 3/7] using `display: inline-block` in `.ui.ui.dropdown`

---
 templates/repo/create.tmpl        | 2 +-
 templates/repo/graph.tmpl         | 2 +-
 templates/repo/settings/tags.tmpl | 2 +-
 web_src/css/base.css              | 5 ++++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index d5e652e396..2e1de244ea 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -135,7 +135,7 @@
 
 						<div class="inline field">
 							<label>.gitignore</label>
-							<div class="ui multiple search selection dropdown tw-flex-wrap">
+							<div class="ui multiple search selection dropdown">
 								<input type="hidden" name="gitignores" value="{{.gitignores}}">
 								<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
 								<div class="menu">
diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 5d0222f858..9eb4bd4ecb 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -6,7 +6,7 @@
 			<h2 class="ui header dividing">
 				{{ctx.Locale.Tr "repo.commit_graph"}}
 				<div class="ui icon buttons tiny color-buttons">
-					<div class="ui multiple selection search dropdown tw-flex-wrap" id="flow-select-refs-dropdown">
+					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
 						<input type="hidden" name="flow">
 						<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
 						<div class="menu">
diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl
index 91107e22a7..c9efb7b67e 100644
--- a/templates/repo/settings/tags.tmpl
+++ b/templates/repo/settings/tags.tmpl
@@ -26,7 +26,7 @@
 								</div>
 								<div class="whitelist field">
 									<label>{{ctx.Locale.Tr "repo.settings.tags.protection.allowed.users"}}</label>
-									<div class="ui multiple search selection dropdown tw-flex-wrap">
+									<div class="ui multiple search selection dropdown">
 										<input type="hidden" name="allowlist_users" value="{{.allowlist_users}}">
 										<div class="default text">{{ctx.Locale.Tr "search.user_kind"}}</div>
 										<div class="menu">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 223d9fbad6..53a420c861 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1355,7 +1355,6 @@ table th[data-sortt-desc] .svg {
 
 .btn,
 .ui.ui.button,
-.ui.ui.dropdown,
 .flex-text-inline {
   display: inline-flex;
   align-items: center;
@@ -1364,6 +1363,10 @@ table th[data-sortt-desc] .svg {
   min-width: 0; /* make ellipsis work */
 }
 
+.ui.ui.dropdown {
+  display: inline-block;
+}
+
 .ui.ui.dropdown.selection {
   min-width: 14em; /* match the default min width */
 }

From 78c0559c68aa3159558fbe5bdafbf3100d2270e1 Mon Sep 17 00:00:00 2001
From: charles7668 <charles76680119@gmail.com>
Date: Sat, 13 Jul 2024 15:31:55 +0800
Subject: [PATCH 4/7] Fix base css

---
 web_src/css/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 53a420c861..4758c4f987 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1355,6 +1355,7 @@ table th[data-sortt-desc] .svg {
 
 .btn,
 .ui.ui.button,
+.ui.ui.dropdown,
 .flex-text-inline {
   display: inline-flex;
   align-items: center;

From 123e0cd3aba0571aef0f19854ef7d0f00b7d268e Mon Sep 17 00:00:00 2001
From: charles7668 <charles76680119@gmail.com>
Date: Sat, 13 Jul 2024 15:32:21 +0800
Subject: [PATCH 5/7] Add multi selection test case to devtest

---
 templates/devtest/fomantic-dropdown.tmpl | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl
index 57a7c1313e..e04c1a8464 100644
--- a/templates/devtest/fomantic-dropdown.tmpl
+++ b/templates/devtest/fomantic-dropdown.tmpl
@@ -29,6 +29,16 @@
 				<div class="default text">empty multiple dropdown</div>
 				<div class="menu">
 					<div class="item">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 multiple clearable search selection dropdown">
@@ -38,6 +48,16 @@
 				<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 class="ui buttons">

From 379e0b6a3a8e290496cfa22a22db7eae1d9e3476 Mon Sep 17 00:00:00 2001
From: charles7668 <charles76680119@gmail.com>
Date: Sat, 13 Jul 2024 20:42:32 +0800
Subject: [PATCH 6/7] Using `flex-wrap: wrap` in
 `.ui.multiple.selection.dropdown`

---
 web_src/css/base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4758c4f987..8d9f810ef8 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1364,8 +1364,8 @@ table th[data-sortt-desc] .svg {
   min-width: 0; /* make ellipsis work */
 }
 
-.ui.ui.dropdown {
-  display: inline-block;
+.ui.multiple.selection.dropdown {
+  flex-wrap: wrap;
 }
 
 .ui.ui.dropdown.selection {

From e16d16a6e039bae11322e77b474974fe06fd5113 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 13 Jul 2024 21:16:59 +0800
Subject: [PATCH 7/7] improve devtest page

---
 templates/devtest/fomantic-dropdown.tmpl | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl
index e04c1a8464..0b9d227220 100644
--- a/templates/devtest/fomantic-dropdown.tmpl
+++ b/templates/devtest/fomantic-dropdown.tmpl
@@ -41,8 +41,19 @@
 					<div class="item">very large item test 3</div>
 				</div>
 			</div>
-			<div class="ui multiple clearable search selection dropdown">
-				<input type="hidden" value="1">
+			<div class="ui buttons">
+				<button class="ui button">Button with Dropdown</button>
+				<div class="ui dropdown button icon">
+					{{svg "octicon-triangle-down"}}
+					<div class="menu">
+						<div class="item">item</div>
+					</div>
+				</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>
@@ -60,15 +71,6 @@
 					<div class="item" data-value="11">very large item test 3</div>
 				</div>
 			</div>
-			<div class="ui buttons">
-				<button class="ui button">Button with Dropdown</button>
-				<div class="ui dropdown button icon">
-					{{svg "octicon-triangle-down"}}
-					<div class="menu">
-						<div class="item">item</div>
-					</div>
-				</div>
-			</div>
 		</div>
 
 		<h2>Selection</h2>