Fix truncated organization names (#14655)

* Fix truncated organization names

Previous ellipsis implementation hid vertical overflow - image + descent line of letters.
Organization visibility in select on dashboard was not always visible.
This commit extracts classes which don't make collisions with other items on page.

12 files changed, 71 insertions, 65 deletions

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index 8e4e0c748b..8bb3584ec6 100644
--- a/templates/repo/create.tmpl
+++ b/templates/repo/create.tmpl
@@ -18,20 +18,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
-								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/migrate/git.tmpl b/templates/repo/migrate/git.tmpl
index f200281cbe..233a019435 100644
--- a/templates/repo/migrate/git.tmpl
+++ b/templates/repo/migrate/git.tmpl
@@ -47,20 +47,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar .}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/migrate/gitea.tmpl b/templates/repo/migrate/gitea.tmpl
index a214369f21..b21e6b18ff 100644
--- a/templates/repo/migrate/gitea.tmpl
+++ b/templates/repo/migrate/gitea.tmpl
@@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar .}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/migrate/github.tmpl b/templates/repo/migrate/github.tmpl
index c4ca991aca..06f76d7298 100644
--- a/templates/repo/migrate/github.tmpl
+++ b/templates/repo/migrate/github.tmpl
@@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/migrate/gitlab.tmpl b/templates/repo/migrate/gitlab.tmpl
index bb1e19041d..545a1ff437 100644
--- a/templates/repo/migrate/gitlab.tmpl
+++ b/templates/repo/migrate/gitlab.tmpl
@@ -81,20 +81,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/migrate/gogs.tmpl b/templates/repo/migrate/gogs.tmpl
index be66d5079d..ac81872b92 100644
--- a/templates/repo/migrate/gogs.tmpl
+++ b/templates/repo/migrate/gogs.tmpl
@@ -83,20 +83,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu" title="{{.SignedUser.Name}}">
-								<div class="item" data-value="{{.SignedUser.ID}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}">
 									{{avatar .SignedUser}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar .}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
diff --git a/templates/repo/pulls/fork.tmpl b/templates/repo/pulls/fork.tmpl
index d172fc73cc..bf310e1596 100644
--- a/templates/repo/pulls/fork.tmpl
+++ b/templates/repo/pulls/fork.tmpl
@@ -13,22 +13,22 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
 								{{if .CanForkToUser}}
-									<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+									<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 										{{avatar .SignedUser 28 "mini"}}
-										{{.SignedUser.ShortName 40}}
+										<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 									</div>
 								{{end}}
 								{{range .Orgs}}
-									<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+									<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 										{{avatar . 28 "mini"}}
-										{{.ShortName 40}}
+										<span class="truncated-item-name">{{.ShortName 40}}</span>
 									</div>
 								{{end}}
 							</div>
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index c83ffde40a..a6ba1ffee3 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -2,9 +2,9 @@
 	<div class="ui secondary stackable menu">
 		<div class="item">
 			<div class="ui floating dropdown link jump">
-				<span class="text">
+				<span class="text truncated-item-container">
 					{{avatar .ContextUser}}
-					{{.ContextUser.ShortName 40}}
+					<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 					{{if .ContextUser.IsOrganization}}
 						<span class="org-visibility">
 							{{if .ContextUser.Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
@@ -18,14 +18,14 @@
 						{{.i18n.Tr "home.switch_dashboard_context"}}
 					</div>
 					<div class="scrolling menu items">
-						<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}}">
+						<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}}">
 							{{avatar .SignedUser}}
-							{{.SignedUser.ShortName 40}}
+							<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 						</a>
 						{{range .Orgs}}
-							<a class="{{if eq $.ContextUser.ID .ID}}active selected{{end}} item" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{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 truncated-item-container" title="{{.Name}}" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else if $.PageIsMilestonesDashboard}}milestones{{else}}dashboard{{end}}">
 								{{avatar .}}
-								{{.ShortName 40}}
+								<span class="truncated-item-name">{{.ShortName 40}}</span>
 								<span class="org-visibility">
 									{{if .Visibility.IsLimited}}<div class="ui orange tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 									{{if .Visibility.IsPrivate}}<div class="ui red tiny horizontal label">{{$.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
diff --git a/templates/user/project.tmpl b/templates/user/project.tmpl
index eabed943fe..a385e0bdc5 100644
--- a/templates/user/project.tmpl
+++ b/templates/user/project.tmpl
@@ -13,20 +13,20 @@
 						<label>{{.i18n.Tr "repo.owner"}}</label>
 						<div class="ui selection owner dropdown">
 							<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
-							<span class="text" title="{{.ContextUser.Name}}">
+							<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
 								{{avatar .ContextUser 28 "mini"}}
-								{{.ContextUser.ShortName 40}}
+								<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
 							</span>
 							{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 							<div class="menu">
-								<div class="item" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
+								<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
 									{{avatar .SignedUser 28 "mini"}}
-									{{.SignedUser.ShortName 40}}
+									<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
 								</div>
 								{{range .Orgs}}
-								<div class="item" data-value="{{.ID}}" title="{{.Name}}">
+								<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
 									{{avatar . 28 "mini"}}
-									{{.ShortName 40}}
+									<span class="truncated-item-name">{{.ShortName 40}}</span>
 								</div>
 								{{end}}
 							</div>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index c054c1dc12..2b27e41e61 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -347,9 +347,6 @@ a.muted:hover,
 
 .ui.selection.dropdown .menu > .item {
   border-color: var(--color-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .ui.selection.visible.dropdown > .text:not(.default) {
@@ -390,10 +387,6 @@ a.muted:hover,
 
 .ui.menu .ui.dropdown .menu > .item {
   color: var(--color-text) !important;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
 }
 
 .ui.menu .ui.dropdown .menu > .item:hover {
@@ -2002,3 +1995,16 @@ table th[data-sortt-desc] {
   display: block;
   text-align: left;
 }
+
+.truncated-item-container {
+  display: flex !important;
+}
+
+.truncated-item-name {
+  line-height: 2em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: -.5em;
+  margin-bottom: -.5em;
+}
diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less
index 4ffdc9136f..d5fac494f1 100644
--- a/web_src/less/_dashboard.less
+++ b/web_src/less/_dashboard.less
@@ -75,6 +75,10 @@
     .org-visibility .label {
       margin-left: 5px;
     }
+
+    .ui.dropdown {
+      max-width: 100%;
+    }
   }
 }
 
diff --git a/web_src/less/_form.less b/web_src/less/_form.less
index a4842edd01..76c1a06990 100644
--- a/web_src/less/_form.less
+++ b/web_src/less/_form.less
@@ -278,10 +278,6 @@ textarea:focus,
     form {
       .dropdown .text {
         margin-right: 0 !important;
-
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
       }
 
       .header {