ReadOnly mode display tweaks

src/editor/widgets/comment/Comment.jsx

@@ -27,12 +27,20 @@ const Comment = props => {
     props.onUpdate(props.body, { ...props.body, value: evt.target.value });
   }
 
+  const creatorInfo = props.body.creator && 
+    <div className="lastmodified">
+      <span className="lastmodified-by">{props.body.creator.name}</span>
+      { props.body.created && 
+        <span className="lastmodified-at">
+          <TimeAgo datetime={Environment.toClientTime(props.body.created)} />
+        </span> 
+      }
+    </div>
+
   return props.readOnly ? (
     <div className="r6o-widget comment">
       <div className="value">{props.body.value}</div>
-      <div className="lastmodified">
+      { creatorInfo }
-        <div className="lastmodified-by">{props.body.creator?.name}</div>
-      </div>
     </div>
   ) : (
     <div className={ isEditable ? "r6o-widget comment editable" : "r6o-widget comment"}>
@@ -43,16 +51,7 @@ const Comment = props => {
         onSaveAndClose={props.onSaveAndClose} 
       />
       
-      { props.body.creator && 
+      { creatorInfo }
-        <div className="lastmodified">
-          <span className="lastmodified-by">{props.body.creator.name}</span>
-          { props.body.created && 
-            <span className="lastmodified-at">
-              <TimeAgo datetime={Environment.toClientTime(props.body.created)} />
-            </span> 
-          }
-        </div>
-      }
 
       <div 
         className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"} 

src/editor/widgets/tag/TagWidget.jsx

@@ -35,23 +35,25 @@ const TagWidget = props => {
 
   return (
     <div className="tags">
-      <ul>
+      { tagBodies.length > 0 &&
-        { tagBodies.map(tag => 
+        <ul>
-          <li key={tag.value} onClick={toggle(tag.value)}>
+          { tagBodies.map(tag => 
-            <span className="label">{tag.value}</span>
+            <li key={tag.value} onClick={toggle(tag.value)}>
+              <span className="label">{tag.value}</span>
 
-            {!props.readOnly &&
+              {!props.readOnly &&
-              <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
+                <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
-                <span className="delete-wrapper" onClick={onDelete(tag)}>
+                  <span className="delete-wrapper" onClick={onDelete(tag)}>
-                  <span className="delete">
+                    <span className="delete">
-                    <CloseIcon width={12} />
+                      <CloseIcon width={12} />
+                    </span>
                   </span>
-                </span>
+                </CSSTransition>
-              </CSSTransition>
+              }
-            }
+            </li>
-          </li>
+          )}
-        )}
+        </ul>
-      </ul>
+      }
 
       { !props.readOnly &&
         <input 

themes/default/editor/_editor.scss

@@ -49,7 +49,7 @@
     }
 
     .r6o-widget {
-      border-bottom:1px solid $lightgrey-border-darker;
+      border-bottom:1px solid $lightgrey-border;
     }
   }
 

themes/default/editor/widgets/tag/_tag.scss

@@ -1,3 +1,7 @@
+.tags:empty {
+  display:none;
+}
+
 .tags {
   background-color:$blueish-white;
   border-bottom:1px solid $lightgrey-border;