Fix CSS

ui/component/commentReactions/view.jsx

@@ -126,7 +126,7 @@ export default function CommentReactions(props: Props) {
           onClick={() => react(commentId, REACTION_TYPES.CREATOR_LIKE)}
         >
           {creatorLiked && (
-            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" />
+            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" allowGifs />
           )}
         </Button>
       )}

ui/component/notification/view.jsx

@@ -191,7 +191,7 @@ export default function Notification(props: Props) {
               {isCommentNotification && commentText ? (
                 <>
                   <div className="notification__title">{title}</div>
-                  <div title={commentText} className="notification__text mobile-hidden">
+                  <div title={commentText} className="notification__text">
                     {commentText}
                   </div>
                 </>

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 {