diff --git a/src/Element/Note.css b/src/Element/Note.css index ee705518..e58114dd 100644 --- a/src/Element/Note.css +++ b/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); diff --git a/src/Element/NoteFooter.tsx b/src/Element/NoteFooter.tsx index 08fec331..a715e85b 100644 --- a/src/Element/NoteFooter.tsx +++ b/src/Element/NoteFooter.tsx @@ -186,23 +186,24 @@ export default function NoteFooter(props: NoteFooterProps) { } return ( - <> -
- -
- -
-
} menuClassName="ctx-menu"> - {menuItems()} - +
+
+ {tipButton()} + {reactionIcons()}
setReply(s => !s)}>
- - {reactionIcons()} - {tipButton()} + +
+ +
+
} + menuClassName="ctx-menu" + > + {menuItems()} +
setTip(false)} show={tip} /> - + ) } diff --git a/src/Element/NoteReaction.css b/src/Element/NoteReaction.css index 2c7d6237..42cd356c 100644 --- a/src/Element/NoteReaction.css +++ b/src/Element/NoteReaction.css @@ -1,5 +1,4 @@ .reaction { - margin-bottom: 24px; } .reaction > .note { diff --git a/src/index.css b/src/index.css index 42a26fdc..8bbcf73f 100644 --- a/src/index.css +++ b/src/index.css @@ -106,8 +106,7 @@ html.light .card { .card>.footer { display: flex; - flex-direction: row-reverse; - margin-top: 12px; + flex-direction: row; } button {