From 8f90bb83e77947e75d3f32a787a39256808f5b56 Mon Sep 17 00:00:00 2001
From: pfftdammitchris <pfftdammitchris@gmail.com>
Date: Sat, 24 Feb 2018 08:42:02 -0800
Subject: [PATCH] Added title attributes to support long folder names and
 foldernames are no longer overflowing nearby elements

---
 browser/components/NoteItem.js   |  8 +++-----
 browser/components/NoteItem.styl | 15 ++++++++-------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js
index 7abb86b9..2c93dc18 100644
--- a/browser/components/NoteItem.js
+++ b/browser/components/NoteItem.js
@@ -82,11 +82,9 @@ const NoteItem = ({
       {['ALL', 'STORAGE'].includes(viewType) && <div styleName='item-middle'>
         <div styleName='item-middle-time'>{dateDisplay}</div>
         <div styleName='item-middle-app-meta'>
-          <div style={{display: 'inline-block'}}>
-            <span styleName='item-middle-app-meta-label'>
-              {viewType === 'ALL' && storageName}
-              {viewType === 'STORAGE' && folderName}
-            </span>
+          <div title={viewType === 'ALL' ? storageName : viewType === 'STORAGE' ? folderName : null} styleName='item-middle-app-meta-label'>
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
           </div>
         </div>
       </div>}
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 5a8be3c5..f213348a 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -100,14 +100,15 @@ $control-height = 30px
   display inline-block
 
 .item-middle-app-meta
-  display inline-block
   float right
-  opacity 0.8
-
-.item-middle-app-meta-label
-  color $ui-inactive-text-color
-  opacity 0.6
-  padding 0 3px
+  .item-middle-app-meta-label
+    opacity 0.4
+    color $ui-inactive-text-color
+    padding 0 3px
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    max-width 200px
 
 .item-bottom
   position relative