fix: notes list item layout when title is empty (#850)

app/assets/javascripts/components/NotesListItem.tsx

@@ -95,45 +95,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
       )}
       <div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
         <div className="name-container">
-          <div className="name">{note.title}</div>
+          {note.title.length ? <div className="name">{note.title}</div> : null}
-          <div className="flag-icons">
-            {note.locked && (
-              <span title="Editing Disabled">
-                <Icon
-                  ariaLabel="Editing Disabled"
-                  type="pencil-off"
-                  className="sn-icon--small color-info"
-                />
-              </span>
-            )}
-            {note.trashed && (
-              <span title="Trashed">
-                <Icon
-                  ariaLabel="Trashed"
-                  type="trash-filled"
-                  className="sn-icon--small color-danger"
-                />
-              </span>
-            )}
-            {note.archived && (
-              <span title="Archived">
-                <Icon
-                  ariaLabel="Archived"
-                  type="archive"
-                  className="sn-icon--mid color-accessory-tint-3"
-                />
-              </span>
-            )}
-            {note.pinned && (
-              <span title="Pinned">
-                <Icon
-                  ariaLabel="Pinned"
-                  type="pin-filled"
-                  className="sn-icon--small color-info"
-                />
-              </span>
-            )}
-          </div>
         </div>
         {!hidePreview && !note.hidePreview && !note.protected && (
           <div className="note-preview">
@@ -187,6 +149,44 @@ export const NotesListItem: FunctionComponent<Props> = ({
           </div>
         ) : null}
       </div>
+      <div className="flag-icons">
+        {note.locked && (
+          <span title="Editing Disabled">
+            <Icon
+              ariaLabel="Editing Disabled"
+              type="pencil-off"
+              className="sn-icon--small color-info"
+            />
+          </span>
+        )}
+        {note.trashed && (
+          <span title="Trashed">
+            <Icon
+              ariaLabel="Trashed"
+              type="trash-filled"
+              className="sn-icon--small color-danger"
+            />
+          </span>
+        )}
+        {note.archived && (
+          <span title="Archived">
+            <Icon
+              ariaLabel="Archived"
+              type="archive"
+              className="sn-icon--mid color-accessory-tint-3"
+            />
+          </span>
+        )}
+        {note.pinned && (
+          <span title="Pinned">
+            <Icon
+              ariaLabel="Pinned"
+              type="pin-filled"
+              className="sn-icon--small color-info"
+            />
+          </span>
+        )}
+      </div>
     </div>
   );
 };

app/assets/stylesheets/_notes.scss

@@ -129,8 +129,7 @@
     .meta {
       flex-grow: 1;
       min-width: 0;
-      padding: 1rem;
+      padding: 1rem 0;
-      padding-left: 0;
       border-bottom: 1px solid var(--sn-stylekit-border-color);
 
       &.icon-hidden {
@@ -152,20 +151,6 @@
         margin-right: 0.5rem;
       }
 
-      .flag-icons {
-        padding: 0.135rem 0;
-
-        &,
-        & > * {
-          display: flex;
-          align-items: center;
-        }
-
-        & > * + * {
-          margin-left: 0.375rem;
-        }
-      }
-
       .bottom-info {
         font-size: 12px;
         line-height: 1.4;
@@ -173,6 +158,22 @@
       }
     }
 
+    .flag-icons {
+      display: flex;
+      align-items: flex-start;
+      padding: 1rem;
+      padding-left: 0;
+
+      & > * {
+        display: flex;
+        align-items: center;
+      }
+
+      & > * + * {
+        margin-left: 0.375rem;
+      }
+    }
+
     .tags-string {
       display: flex;
       flex-wrap: wrap;