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()}
-
- {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 {