feat: prevent highlighting the pinned message metada row

Author: MartinCupela

src/components/Message/styling/Message.scss

@@ -510,11 +510,14 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    margin-block-start: var(--str-chat__spacing-0_5);
+    height: var(--size-24);
     color: var(--chat-text-timestamp);
-    font-size: var(--typography-font-size-xs,);
-    font-weight: var(--typography-font-weight-regular);
-    line-height: var(--typography-line-height-tight);
+
+    * {
+      font-size: var(--typography-font-size-xs,);
+      font-weight: var(--typography-font-weight-regular);
+      line-height: var(--typography-line-height-tight);
+    }
 
     .str-chat__message-simple-name {
       @include utils.prevent-glitch-text-overflow;
@@ -601,7 +604,15 @@
 }
 
 .str-chat__message--pinned {
-  background-color: var(--str-chat__message-pinned-background-color);
+  &::before {
+    content: '';
+    display: block;
+    grid-column: 1 / -1;
+    grid-row: 1 / 6; /* All areas except last row (metadata) */
+    width: 100%;
+    min-width: 100%;
+    background-color: var(--str-chat__message-pinned-background-color);
+  }
 }
 
 /* This rule won't be applied in browsers that don't support :has() */