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.

diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl
index 8e4e0c748b32878f99480386b985b966bbd6e234..8bb3584ec650d2da5d49b5bbd7a89f5851e9289f 100644 (file)
--- 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 f200281cbe8469a227ba5d664ad4ee2bebe89373..233a01943530826766d3e1ea9a3de379d0467ac3 100644 (file)
--- 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 a214369f218159b795a91b44af891aec0c5462f1..b21e6b18ffdfcd4e7fd4e83deb05717cbcc3b3b1 100644 (file)
--- 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 c4ca991aca865eec1c0667f08d9a5f27103ca0a7..06f76d72980e6fb1edf9e1754d3af80d5370eb02 100644 (file)
--- 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 bb1e19041d75fc1bee7a85f32937ff5ffda3077e..545a1ff43717f73a321f9463a981f59137d8dfe3 100644 (file)
--- 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 be66d5079d819edcc7184452b070d316864624c7..ac81872b92270d43f851ba74e5793396c5082a86 100644 (file)
--- 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 d172fc73ccd643e50aad3894df8e5cfda0eb075a..bf310e15968c7a1fdc330dc5c4469dc554fa4489 100644 (file)
--- 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 c83ffde40a33dea89474073fe878989a37a993f0..a6ba1ffee3b1c591c62e77e890a3630067b65806 100644 (file)
--- 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 eabed943fe0de4ce9f48cc27a5c8b726c1a6962b..a385e0bdc54854371842930edfac8e484c76e1b7 100644 (file)
--- 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 c054c1dc120834d9039855c02e53867e78a56517..2b27e41e612a9cd3874e932fc75693f5134c8ee0 100644 (file)
--- 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 4ffdc9136f84cd8f6ebe264b62d74273ce70c487..d5fac494f199c07028dd8d22f07076665aa3e8cc 100644 (file)
--- 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 a4842edd013604a70b7825b331fcb9097497836a..76c1a06990f6234387de1903630b206cb3a26b9b 100644 (file)
--- 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 {