diff --git a/ui/component/commentReactions/view.jsx b/ui/component/commentReactions/view.jsx
index 576475aaf..8086e1818 100644
--- a/ui/component/commentReactions/view.jsx
+++ b/ui/component/commentReactions/view.jsx
@@ -126,7 +126,7 @@ export default function CommentReactions(props: Props) {
onClick={() => react(commentId, REACTION_TYPES.CREATOR_LIKE)}
>
{creatorLiked && (
-
+
)}
)}
diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx
index 2d5746a2d..e51fe4ebe 100644
--- a/ui/component/notification/view.jsx
+++ b/ui/component/notification/view.jsx
@@ -191,7 +191,7 @@ export default function Notification(props: Props) {
{isCommentNotification && commentText ? (
<>
{title}
-
+
{commentText}
>
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index 14d6d2718..47a27c1ca 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -18,13 +18,14 @@ $contentMaxWidth: 60rem;
.comment__create,
.comment__content {
margin: var(--spacing-m);
+ margin-bottom: 0;
}
}
.notification__icon {
display: flex;
align-items: flex-start;
- margin-top: var(--spacing-xs);
+ margin: auto;
.icon__wrapper {
width: 1rem;
@@ -42,6 +43,10 @@ $contentMaxWidth: 60rem;
align-items: center;
margin-left: var(--spacing-m);
}
+
+ @media (max-width: $breakpoint-medium) {
+ margin-top: var(--spacing-xxs);
+ }
}
.notification__wrapper {
@@ -64,6 +69,16 @@ $contentMaxWidth: 60rem;
@media (max-width: $breakpoint-small) {
padding: var(--spacing-s);
}
+
+ .comment__creator-like {
+ height: 0.8rem;
+ width: 0.8rem;
+ margin-left: 3px;
+ z-index: 3;
+ position: absolute;
+ top: 0.4rem;
+ left: 0.4rem;
+ }
}
.notification__wrapper--unread {
@@ -174,6 +189,15 @@ $contentMaxWidth: 60rem;
margin: var(--spacing-m);
margin-bottom: 0;
+ @media (min-width: $breakpoint-small) {
+ margin-left: 5rem;
+ }
+
+ @media (max-width: $breakpoint-small) {
+ margin-left: 3rem;
+ }
+
+
> *:not(:last-of-type) {
margin-right: var(--spacing-m);
}
@@ -181,16 +205,6 @@ $contentMaxWidth: 60rem;
.button__label {
margin-left: var(--spacing-xs);
}
-
- .comment__creator-like {
- height: 0.8rem;
- width: 0.8rem;
- margin-left: 3px;
- z-index: 3;
- position: absolute;
- top: 0.4rem;
- left: 0.4rem;
- }
}
.notification__bubble {