fix: note icons getting pushed by extra-long words (#835)

standardnotes · Jan 31, 2022 · 0e00901 · 0e00901
1 parent 46ee84c
commit 0e00901
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/app/assets/javascripts/components/NotesListItem.tsx b/app/assets/javascripts/components/NotesListItem.tsx
@@ -93,8 +93,8 @@ export const NotesListItem: FunctionComponent<Props> = ({
         </div>
       )}
       <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
-        <div className="name">
-          <div>{note.title}</div>
+        <div className="name-container">
+          <div className="name">{note.title}</div>
           <div className="flag-icons">
             {note.locked && (
               <span title="Editing Disabled">

diff --git a/app/assets/stylesheets/_notes.scss b/app/assets/stylesheets/_notes.scss
@@ -134,18 +134,24 @@
         padding-left: 1rem;
       }
 
-      .name {
+      .name-container {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
         font-weight: 600;
         font-size: 1rem;
         line-height: 1.3;
         overflow: hidden;
-        text-overflow: ellipsis;
+      }
+
+      .name {
+        word-break: break-all;
+        margin-right: 0.5rem;
       }
 
       .flag-icons {
+        padding: .135rem 0;
+
         &,
         & > * {
           display: flex;