Merge pull request #2412 from brapifra/brais/folderitem-text-overflow

Add text-overflow: ellipsis to FolderItem
BoostIO · Sep 30, 2018 · 8eb5351 · 8eb5351
2 parents e0e0fbf + 5dcd74b
commit 8eb5351
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl
@@ -2,6 +2,7 @@
   height 35px
   box-sizing border-box
   padding 2.5px 15px
+  display flex
   &:hover
     background-color darken(white, 3%)
 
@@ -18,7 +19,10 @@
   border-left solid 2px transparent
   padding 0 10px
   line-height 30px
-  float left
+  flex 1
+  white-space nowrap
+  text-overflow ellipsis
+  overflow hidden
 .folderItem-left-danger
   color $danger-color
   font-weight bold
@@ -52,7 +56,8 @@
   outline none
 
 .folderItem-right
-  float right
+  -webkit-box-flex: 1
+  white-space nowrap
 
 .folderItem-right-button
   vertical-align middle

diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -9,13 +9,17 @@
   box-sizing border-box
   border-bottom $default-border
   margin-bottom 5px
+  display flex
 
 .header-label
-  float left
   cursor pointer
   &:hover
     .header-label-editButton
       opacity 1
+  flex 1
+  white-space nowrap
+  text-overflow ellipsis
+  overflow hidden
 
 .header-label-path
   color $ui-inactive-text-color
@@ -38,8 +42,8 @@
   outline none
 
 .header-control
-  float right
-
+  -webkit-box-flex: 1
+  white-space nowrap
 .header-control-button
   width 30px
   height 25px