Fix notification mentions padding

src/components/BookmarkNote/BookmarkNote.tsx

@@ -135,24 +135,24 @@ const BookmarkNote: Component<{ note: PrimalNote, large?: boolean }> = (props) =
 
   return (
     <div class={styles.bookmark}>
-    <ButtonGhost
-      onClick={(e: MouseEvent) => {
-        e.preventDefault();
+      <ButtonGhost
+        onClick={(e: MouseEvent) => {
+          e.preventDefault();
 
-        doBookmark(isBookmarked());
+          doBookmark(isBookmarked());
 
-      }}
-      disabled={bookmarkInProgress()}
-    >
-      <Show
-        when={isBookmarked()}
-        fallback={
-          <div class={`${styles.emptyBookmark} ${props.large ? styles.large : ''}`}></div>
-        }
-        >
-          <div class={`${styles.fullBookmark} ${props.large ? styles.large : ''}`}></div>
-      </Show>
-    </ButtonGhost>
+        }}
+        disabled={bookmarkInProgress()}
+      >
+        <Show
+          when={isBookmarked()}
+          fallback={
+            <div class={`${styles.emptyBookmark} ${props.large ? styles.large : ''}`}></div>
+          }
+          >
+            <div class={`${styles.fullBookmark} ${props.large ? styles.large : ''}`}></div>
+        </Show>
+      </ButtonGhost>
     </div>
   )
 }

src/components/Note/Note.module.scss

@@ -491,7 +491,7 @@
       grid-area: content;
       display: flex;
       flex-direction: column;
-
+      padding-right: 20px;
 
       .message {
         grid-area: message;
@@ -508,6 +508,7 @@
 
       .footer {
         margin-top: 12px;
+        margin-right: 0 !important;
       }
     }
   }

src/components/Note/NoteFooter/NoteFooter.module.scss

@@ -55,12 +55,12 @@
 
 .footer {
   display: grid;
-  grid-template-columns: 125px 125px 125px 125px 28px;
+  grid-template-columns: 125px 125px 125px 125px auto;
   position: relative;
   width: 100%;
 
   &.wide {
-    grid-template-columns: 137px 137px 137px 135px 28px;
+    grid-template-columns: 137px 137px 137px 135px auto;
   }
 
   .context {
@@ -171,6 +171,11 @@
       padding-left: 7px;
     }
   }
+
+  .bookmarkFoot {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 .smallZapLottie {

src/components/Note/NoteFooter/NoteFooter.tsx

@@ -377,10 +377,12 @@ const NoteFooter: Component<{
         </div>
       </button>
 
-      <BookmarkNote
-        note={props.note}
-        large={props.large}
-      />
+      <div class={styles.bookmarkFoot}>
+        <BookmarkNote
+          note={props.note}
+          large={props.large}
+        />
+      </div>
 
     </div>
   )