note ui improvements

src/element/Invoice.css

@@ -2,7 +2,8 @@
     background: var(--bg-color);
     border-radius: 10px;
     border: 1px solid var(--gray-tertiary);
-    padding: 10px;
+    padding: 12px;
+    margin: 10px auto;
 }
 
 .note-invoice h2, .note-invoice h4, .note-invoice p {

src/element/Note.css

@@ -17,7 +17,7 @@
 }
 
 .note > .header > .info {
-    font-size: small;
+    font-size: 10px;
     white-space: nowrap;
     color: var(--gray-light);
     align-self: flex-start;

src/element/NoteReaction.css

@@ -19,7 +19,7 @@
 
 .reaction > .header > .info {
     color: var(--gray-light);
-    font-size: small;
+    font-size: 10px;
     align-self: flex-start;
 }
 

src/element/Text.css

@@ -33,6 +33,13 @@
     margin: 0;
 }
 
+.text li {
+    margin-top: -1em;
+}
+.text li:last-child {
+    margin-bottom: -2em;
+}
+
 .text hr {
     border: 0;
     height: 1px;

src/element/Text.tsx

@@ -150,7 +150,7 @@ function transformLi({ body, tags, users }: TextFragment) {
 
 function transformParagraph({ body, tags, users }: TextFragment) {
     const fragments = transformText({ body, tags, users })
-    if (fragments.every(f => typeof f === 'string')) {
+    if (fragments.every(f => typeof f === 'string') && fragments.length > 1) {
         return <p>{fragments}</p>
     }
     return <>{fragments}</>