note reaction adjustments

src/Element/Note.css

@@ -40,6 +40,18 @@
   padding-left: 46px;
 }
 
+.note .footer .footer-reactions {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+
+@media (min-width: 720px) {
+  .note .footer .footer-reactions {
+    margin-left: 0;
+  }
+}
+
 .note>.footer .ctx-menu {
   background-color: var(--note-bg);
   color: var(--font-secondary-color);

src/Element/NoteFooter.tsx

@@ -186,23 +186,24 @@ export default function NoteFooter(props: NoteFooterProps) {
   }
 
   return (
-    <>
+    <div className="footer">
-      <div className="footer">
+      <div className="footer-reactions">
-        <Menu menuButton={<div className="reaction-pill">
+        {tipButton()}
-          <div className="reaction-pill-icon">
+        {reactionIcons()}
-            <Dots />
-          </div>
-        </div>} menuClassName="ctx-menu">
-          {menuItems()}
-        </Menu>
         <div className={`reaction-pill ${reply ? 'reacted' : ''}`} onClick={(e) => setReply(s => !s)}>
           <div className="reaction-pill-icon">
             <Reply />
           </div>
         </div>
-
+        <Menu menuButton={<div className="reaction-pill">
-        {reactionIcons()}
+            <div className="reaction-pill-icon">
-        {tipButton()}
+              <Dots />
+            </div>
+          </div>}
+          menuClassName="ctx-menu"
+        >
+          {menuItems()}
+        </Menu>
       </div>
       <NoteCreator
         autoFocus={true}
@@ -212,6 +213,6 @@ export default function NoteFooter(props: NoteFooterProps) {
         setShow={setReply}
       />
       <LNURLTip svc={author?.lud16 || author?.lud06} onClose={() => setTip(false)} show={tip} />
-    </>
+    </div>
   )
 }

src/Element/NoteReaction.css

@@ -1,5 +1,4 @@
 .reaction {
-    margin-bottom: 24px;
 }
 
 .reaction > .note {

src/index.css

@@ -106,8 +106,7 @@ html.light .card {
 
 .card>.footer {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
-  margin-top: 12px;
 }
 
 button {