From b69b01e36b3ae3f0e6c891980d01abdb8acf7f22 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Thu, 26 Aug 2021 11:44:00 -0300
Subject: [PATCH] Fix CSS

---
 ui/component/commentReactions/view.jsx |  2 +-
 ui/component/notification/view.jsx     |  2 +-
 ui/scss/component/_notification.scss   | 36 ++++++++++++++++++--------
 3 files changed, 27 insertions(+), 13 deletions(-)

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 && (
-            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" />
+            <ChannelThumbnail xsmall uri={authorUri} hideStakedIndicator className="comment__creator-like" allowGifs />
           )}
         </Button>
       )}
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 ? (
                 <>
                   <div className="notification__title">{title}</div>
-                  <div title={commentText} className="notification__text mobile-hidden">
+                  <div title={commentText} className="notification__text">
                     {commentText}
                   </div>
                 </>
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 {