💄 Site > Projects hub > Add ellipsis

site/src/components/projects-hub/style.styl

@@ -16,7 +16,7 @@
         opacity 0.6
 
     .select-projects
-        line-height 40px
+        line-height 22px
         cursor pointer
 
         .arrow-down
@@ -31,15 +31,23 @@
             &.hover
                 display none
 
-        .current
-            padding-left 20px
-
         .others
             display none
             top 100%
             background #393855
 
-            .other-project
+        .project
+            padding-top 9px
+            padding-bottom 9px
+            text-overflow ellipsis
+
+            &.current
+                padding-left 20px
+                white-space nowrap
+                overflow hidden
+                padding-right 92px
+
+            &.other-project
                 display block
                 padding-left 20px
 

site/src/components/projects-hub/template.html

@@ -4,7 +4,7 @@
     </div>
 
     <div v-if="projectsCount > 1" class="select-projects">
-        <div class="current">
+        <div class="current project">
             {{ currentProject.name }}
         </div>
 
@@ -12,7 +12,7 @@
         <img class="icon arrow-down hover" src="../../../static/svg/arrow-down-hover.svg" alt="">
 
         <div class="others">
-            <a class="other-project" v-if="currentProject.slug !== project.slug" href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
+            <a class="other-project project" v-if="currentProject.slug !== project.slug" href="#" v-for="project in projects" :key="project.slug" @click.prevent="onProjectClick(project.slug)">
                 {{ project.name }}
             </a>
         </div>