fix: Unread badge

src-v2/styles/ChannelPreview/ChannelPreview-layout.scss

@@ -26,30 +26,26 @@
   }
 }
 
-// Unread badge will be bigger than channel name -> this would cause a layout shift when the unread badge appears -> this trick won't let the unread badge to increase the height of the container avoiding the layout shift
-@mixin unread-badge-layout-fix {
-  overflow-y: visible;
-
-  .str-chat__channel-preview-end-first-row {
-    overflow-y: visible;
-    height: var(--channel-name-height);
-  }
-}
-
 .str-chat__channel-preview {
   @include channel-preview-layout;
   cursor: pointer;
 
   .str-chat__channel-preview-end {
     @include channel-preview-end-layout;
-    @include unread-badge-layout-fix;
     overflow-x: hidden; // need this for ellipsis text to work
 
     .str-chat__channel-preview-end-first-row {
       display: flex;
       align-items: center;
+      height: var(
+        --channel-name-height,
+        1rem
+      ); // Ensure that unread badge won't push container height causing an unwanted layout shift
 
       .str-chat__channel-preview-unread-badge {
+        height: 100%;
+        display: flex;
+        align-items: center;
         padding: var(--str-chat__spacing-2);
       }