Refactor dropdown ellipsis (#34123)

Remove legacy `truncated-item-container` and `truncated-item-name`.

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>

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>

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

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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="item">
-					{{ctx.Locale.Tr "repo.settings.githooks_desc"}}
-				</div>
+			<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 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>
+				<div class="item">
+					<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>
 				{{end}}
 			</div>
 		</div>

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>

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