diff --git a/templates/devtest/fomantic-dropdown.tmpl b/templates/devtest/fomantic-dropdown.tmpl
index d41a161e86cd6..a10dc890cef16 100644
--- a/templates/devtest/fomantic-dropdown.tmpl
+++ b/templates/devtest/fomantic-dropdown.tmpl
@@ -75,12 +75,12 @@
 		<h2>Selection</h2>
 		<div>
 			{{/* the "selection" class is optional, it will be added by JS automatically */}}
-			<select class="ui dropdown selection ellipsis-items-nowrap">
+			<select class="ui dropdown selection ellipsis-text-items">
 				<option>a</option>
 				<option>abcdefuvwxyz</option>
 				<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
 			</select>
-			<select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]">
+			<select class="ui dropdown ellipsis-text-items tw-max-w-[8em]">
 				<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
 				<option>abcdefuvwxyz</option>
 				<option>a</option>
diff --git a/templates/repo/actions/workflow_dispatch.tmpl b/templates/repo/actions/workflow_dispatch.tmpl
index 55fe1224194ea..540bbe916215c 100644
--- a/templates/repo/actions/workflow_dispatch.tmpl
+++ b/templates/repo/actions/workflow_dispatch.tmpl
@@ -10,7 +10,7 @@
 				<span class="ui inline required field">
 					<label>{{ctx.Locale.Tr "actions.workflow.from_ref"}}:</label>
 				</span>
-				<div class="ui inline field dropdown button select-branch branch-selector-dropdown ellipsis-items-nowrap">
+				<div class="ui inline field dropdown button select-branch branch-selector-dropdown ellipsis-text-items">
 					<input type="hidden" name="ref" hx-sync="this:replace" hx-target="#runWorkflowDispatchModalInputs" hx-swap="innerHTML" hx-get="{{$.Link}}/workflow-dispatch-inputs?workflow={{$.CurWorkflow}}" hx-trigger="change" value="refs/heads/{{index .Branches 0}}">
 					{{svg "octicon-git-branch" 14}}
 					<div class="default text">{{index .Branches 0}}</div>
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index f679b8744bf51..261d0ea409bdc 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -46,7 +46,7 @@ Search "repo/branch_dropdown" in the template directory to find all occurrences.
 	data-enable-feed="{{ctx.RootData.EnableFeed}}"
 >
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
-	<div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
+	<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
 		<div class="ui button branch-dropdown-button">
 			<span class="flex-text-block gt-ellipsis">
 				{{if not .DropdownFixedText}}
diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index a90c26b423b87..ada7e0c0920d6 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -12,23 +12,23 @@
 				<div id="create-repo-error-message" class="ui negative message tw-text-center tw-hidden"></div>
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection dropdown" id="repo_owner_dropdown">
+					<div class="ui selection dropdown ellipsis-text-items" id="repo_owner_dropdown">
 						<input type="hidden" name="uid" value="{{.ContextUser.ID}}">
-						<span class="text truncated-item-name"></span>
+						<span class="text"></span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}"
+							<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}"
 								{{if not .CanCreateRepoInDoer}}
 									data-create-repo-disallowed-prompt="{{ctx.Locale.TrN .MaxCreationLimit "repo.form.reach_limit_of_creation_1" "repo.form.reach_limit_of_creation_n" .MaxCreationLimitOfDoer}}"
 								{{end}}
 							>
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 9183b7b46abc0..c8b67490ac8b7 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -14,7 +14,7 @@ Still needs to figure out:
 */}}
 {{if and (not .Issue.IsPull) (not .PageIsComparePull)}}
 <input id="ref_selector" name="ref" type="hidden" value="{{.Reference}}">
-<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-items-nowrap {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
+<div class="ui dropdown select-branch branch-selector-dropdown ellipsis-text-items {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}}"
 	data-no-results="{{ctx.Locale.Tr "no_results_found"}}"
 	{{if and .Issue (or .IsIssueWriter .HasIssuesOrPullsWritePermission)}}data-url-update-issueref="{{$.RepoLink}}/issues/{{.Issue.Index}}/ref"{{end}}
 >
diff --git a/templates/repo/issue/view_content/reference_issue_dialog.tmpl b/templates/repo/issue/view_content/reference_issue_dialog.tmpl
index f6ffeef26d372..c5b860d48e070 100644
--- a/templates/repo/issue/view_content/reference_issue_dialog.tmpl
+++ b/templates/repo/issue/view_content/reference_issue_dialog.tmpl
@@ -7,7 +7,7 @@
 			{{.CsrfTokenHtml}}
 			<div class="field">
 				<label><strong>{{ctx.Locale.Tr "repository"}}</strong></label>
-				<div class="ui search selection dropdown issue_reference_repository_search ellipsis-items-nowrap">
+				<div class="ui search selection dropdown issue_reference_repository_search ellipsis-text-items">
 					<div class="default text gt-ellipsis">{{.Repository.FullName}}</div>
 					<div class="menu"></div>
 				</div>
diff --git a/templates/repo/migrate/codebase.tmpl b/templates/repo/migrate/codebase.tmpl
index d4ca269f020f1..f4de8ff2368af 100644
--- a/templates/repo/migrate/codebase.tmpl
+++ b/templates/repo/migrate/codebase.tmpl
@@ -60,22 +60,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/codecommit.tmpl b/templates/repo/migrate/codecommit.tmpl
index 53ca7dda3d617..275a2aef09e8e 100644
--- a/templates/repo/migrate/codecommit.tmpl
+++ b/templates/repo/migrate/codecommit.tmpl
@@ -61,22 +61,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/git.tmpl b/templates/repo/migrate/git.tmpl
index 3f447f76eb333..41139d4fd67b5 100644
--- a/templates/repo/migrate/git.tmpl
+++ b/templates/repo/migrate/git.tmpl
@@ -34,22 +34,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar .}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/gitbucket.tmpl b/templates/repo/migrate/gitbucket.tmpl
index 559988951b4c2..c89aa6c744e7a 100644
--- a/templates/repo/migrate/gitbucket.tmpl
+++ b/templates/repo/migrate/gitbucket.tmpl
@@ -76,22 +76,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/gitea.tmpl b/templates/repo/migrate/gitea.tmpl
index 3d692129d520b..55cf61a77f29f 100644
--- a/templates/repo/migrate/gitea.tmpl
+++ b/templates/repo/migrate/gitea.tmpl
@@ -72,22 +72,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-							<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+							<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 								{{ctx.AvatarUtils.Avatar .}}
-								<span class="truncated-item-name">{{.ShortName 40}}</span>
+								{{.ShortName 40}}
 							</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/github.tmpl b/templates/repo/migrate/github.tmpl
index 850a2b3c7181d..86b585b861e80 100644
--- a/templates/repo/migrate/github.tmpl
+++ b/templates/repo/migrate/github.tmpl
@@ -74,22 +74,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/gitlab.tmpl b/templates/repo/migrate/gitlab.tmpl
index 9bafa122f18ad..edd69f0027559 100644
--- a/templates/repo/migrate/gitlab.tmpl
+++ b/templates/repo/migrate/gitlab.tmpl
@@ -71,22 +71,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/gogs.tmpl b/templates/repo/migrate/gogs.tmpl
index 0495ce67fb2bd..9149c43239fde 100644
--- a/templates/repo/migrate/gogs.tmpl
+++ b/templates/repo/migrate/gogs.tmpl
@@ -74,22 +74,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-							<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+							<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 								{{ctx.AvatarUtils.Avatar .}}
-								<span class="truncated-item-name">{{.ShortName 40}}</span>
+								{{.ShortName 40}}
 							</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/migrate/onedev.tmpl b/templates/repo/migrate/onedev.tmpl
index 55945154efd19..a25ccf943888b 100644
--- a/templates/repo/migrate/onedev.tmpl
+++ b/templates/repo/migrate/onedev.tmpl
@@ -61,22 +61,22 @@
 
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu" title="{{.SignedUser.Name}}">
-							<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
+							<div class="item" data-value="{{.SignedUser.ID}}">
 								{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-								<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+								{{.SignedUser.ShortName 40}}
 							</div>
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
diff --git a/templates/repo/pulls/fork.tmpl b/templates/repo/pulls/fork.tmpl
index 879e5328f2af5..9a6c44077f172 100644
--- a/templates/repo/pulls/fork.tmpl
+++ b/templates/repo/pulls/fork.tmpl
@@ -10,24 +10,24 @@
 				{{.CsrfTokenHtml}}
 				<div class="inline required field {{if .Err_Owner}}error{{end}}">
 					<label>{{ctx.Locale.Tr "repo.owner"}}</label>
-					<div class="ui selection owner dropdown">
+					<div class="ui selection owner dropdown ellipsis-text-items">
 						<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-						<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
+						<span class="text" title="{{.ContextUser.Name}}">
 							{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
-							<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+							{{.ContextUser.ShortName 40}}
 						</span>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
 							{{if .CanForkToUser}}
-								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
-									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+									{{.SignedUser.ShortName 40}}
 								</div>
 							{{end}}
 							{{range .Orgs}}
-								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
 									{{ctx.AvatarUtils.Avatar . 28 "mini"}}
-									<span class="truncated-item-name">{{.ShortName 40}}</span>
+									{{.ShortName 40}}
 								</div>
 							{{end}}
 						</div>
@@ -52,10 +52,10 @@
 				</div>
 				<div class="inline field">
 					<label>{{ctx.Locale.Tr "repo.fork_branch"}}</label>
-					<div class="ui selection dropdown ellipsis-items-nowrap">
+					<div class="ui selection dropdown ellipsis-text-items">
 						<input type="hidden" id="fork_single_branch" name="fork_single_branch" value="" required>
 						<div class="text" title="{{ctx.Locale.Tr "repo.all_branches"}}">
-							<span class="truncated-item-name">{{ctx.Locale.Tr "repo.all_branches"}}</span>
+							{{ctx.Locale.Tr "repo.all_branches"}}
 						</div>
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
diff --git a/templates/repo/settings/githooks.tmpl b/templates/repo/settings/githooks.tmpl
index 1a603f9fe8790..9b17af140698c 100644
--- a/templates/repo/settings/githooks.tmpl
+++ b/templates/repo/settings/githooks.tmpl
@@ -4,18 +4,14 @@
 			{{ctx.Locale.Tr "repo.settings.githooks"}}
 		</h4>
 		<div class="ui attached segment">
-			<div class="ui list">
+			<div class="ui list flex-items-block">
+				<div class="item"><span>{{ctx.Locale.Tr "repo.settings.githooks_desc"}}</span></div>
+				{{range .Hooks}}
 				<div class="item">
-					{{ctx.Locale.Tr "repo.settings.githooks_desc"}}
+					<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
+					<span class="gt-ellipsis tw-flex-1">{{.Name}}</span>
+					<a class="muted tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">{{svg "octicon-pencil"}}</a>
 				</div>
-				{{range .Hooks}}
-					<div class="item truncated-item-container">
-						<span class="text {{if .IsActive}}green{{else}}grey{{end}} tw-mr-2">{{svg "octicon-dot-fill" 22}}</span>
-						<span class="text truncate tw-flex-1 tw-mr-2">{{.Name}}</span>
-						<a class="muted tw-float-right tw-p-2" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
-							{{svg "octicon-pencil"}}
-						</a>
-					</div>
 				{{end}}
 			</div>
 		</div>
diff --git a/templates/repo/settings/webhook/base_list.tmpl b/templates/repo/settings/webhook/base_list.tmpl
index 36e75a7eb5533..a63771b97ee93 100644
--- a/templates/repo/settings/webhook/base_list.tmpl
+++ b/templates/repo/settings/webhook/base_list.tmpl
@@ -8,14 +8,12 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="ui list">
-		<div class="item">
-			{{.Description}}
-		</div>
+	<div class="ui list flex-items-block">
+		<div class="item"><span>{{.Description}}</span></div>
 		{{range .Webhooks}}
-			<div class="item truncated-item-container">
-				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} tw-mr-2">{{svg "octicon-dot-fill" 22}}</span>
-				<div class="text truncate tw-flex-1 tw-mr-2">
+			<div class="item">
+				<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}}">{{svg "octicon-dot-fill" 22}}</span>
+				<div class="gt-ellipsis tw-flex-1">
 					<a title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
 				</div>
 				<a class="muted tw-p-2" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a>
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index a828bc90e44c5..2774ec5da2047 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -2,32 +2,32 @@
 	<div class="ui secondary stackable menu">
 		<div class="item">
 			<div class="ui floating dropdown jump">
-				<span class="text truncated-item-container">
+				<span class="text">
 					{{ctx.AvatarUtils.Avatar .ContextUser 24 "tw-mr-1"}}
-					<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
+					<span class="gt-ellipsis">{{.ContextUser.ShortName 40}}</span>
 					<span class="org-visibility">
 						{{if .ContextUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 						{{if .ContextUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 					</span>
 					{{svg "octicon-triangle-down" 14 "dropdown icon tw-ml-1"}}
 				</span>
-				<div class="context user overflow menu">
+				<div class="menu context-user-switch">
 					<div class="header">
 						{{ctx.Locale.Tr "home.switch_dashboard_context"}}
 					</div>
-					<div class="scrolling menu items">
-						<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item truncated-item-container" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
+					<div class="scrolling menu">
+						<a class="{{if eq .ContextUser.ID .SignedUser.ID}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{else if .PageIsMilestonesDashboard}}milestones{{end}}">
 							{{ctx.AvatarUtils.Avatar .SignedUser}}
-							<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
+							<span class="gt-ellipsis">{{.SignedUser.ShortName 40}}</span>
 							<span class="org-visibility">
 								{{if .SignedUser.Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 								{{if .SignedUser.Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 							</span>
 						</a>
 						{{range .Orgs}}
-							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item truncated-item-container" title="{{.Name}}" href="{{.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
+							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{.OrganisationLink}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
 								{{ctx.AvatarUtils.Avatar .}}
-								<span class="truncated-item-name">{{.ShortName 40}}</span>
+								<span class="gt-ellipsis">{{.ShortName 40}}</span>
 								<span class="org-visibility">
 									{{if .Visibility.IsLimited}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 									{{if .Visibility.IsPrivate}}<div class="ui basic tiny horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 98eb32bc13eb0..f276ced596b1d 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -347,6 +347,7 @@ a.label,
 
 .ui.dropdown .menu > .item {
   color: var(--color-text);
+  line-height: var(--line-height-default);
 }
 
 .ui.dropdown .menu > .item:hover {
@@ -646,10 +647,11 @@ img.ui.avatar,
   border: 1px solid;
 }
 
-.ui.floating.dropdown .overflow.menu .scrolling.menu.items {
+.ui.dropdown .menu.context-user-switch .scrolling.menu {
   border-radius: 0 !important;
   box-shadow: none !important;
   border-bottom: 1px solid var(--color-secondary);
+  max-width: 80vw;
 }
 
 .user-menu > .item {
@@ -1028,11 +1030,6 @@ table th[data-sortt-desc] .svg {
   text-align: left;
 }
 
-.truncated-item-container {
-  display: flex !important;
-  align-items: center;
-}
-
 .ellipsis-button {
   padding: 0 5px 8px !important;
   display: inline-block !important;
@@ -1041,15 +1038,6 @@ table th[data-sortt-desc] .svg {
   vertical-align: middle !important;
 }
 
-.truncated-item-name {
-  line-height: 2;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: -0.5em;
-  margin-bottom: -0.5em;
-}
-
 .precolors {
   display: flex;
   flex-direction: column;
@@ -1166,14 +1154,20 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
   margin: 0; /* use gap, but not margin */
 }
 
-.ui.dropdown.ellipsis-items-nowrap > .text {
+.ui.dropdown.ellipsis-text-items {
+  /* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.ui.dropdown.ellipsis-text-items > .text {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  line-height: 2.71; /* matches fomantic dropdown's default min-height */
 }
 
-.ellipsis-items-nowrap > .item,
-.ui.dropdown.ellipsis-items-nowrap .menu > .item {
+.ui.dropdown.ellipsis-text-items .menu > .item {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 820e69d9ab110..99ccdfaa6dfa9 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -216,7 +216,7 @@ export default defineComponent({
 });
 </script>
 <template>
-  <div class="ui dropdown custom branch-selector-dropdown ellipsis-items-nowrap">
+  <div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
     <div tabindex="0" class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible">
       <span class="flex-text-block gt-ellipsis">
         <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>