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 {