Custom Emoji: Limit canvas size to wrapper (#6890)

src/components/common/CustomEmoji.module.scss

@@ -13,6 +13,8 @@
 
   :global(.rlottie-canvas) {
     display: block;
+    width: 100% !important;
+    height: 100% !important;
   }
 }
 

src/components/common/RankBadge.tsx

@@ -28,6 +28,7 @@ const RankBadge = ({
   const { openRankModal } = getActions();
   const lang = useLang();
   const hasCustomColor = isOwner || isAdmin;
+  const isPlain = !hasCustomColor;
 
   const rankText = rank || (isOwner && lang('ChannelCreator')) || (isAdmin && lang('ChannelAdmin'));
 
@@ -44,9 +45,10 @@ const RankBadge = ({
     <BadgeButton
       className={buildClassName(
         hasCustomColor && getPeerColorClass(isOwner ? OWNER_PEER_COLOR : ADMIN_PEER_COLOR),
+        isPlain && 'admin-title-plain',
         className,
       )}
-      isPlain={!hasCustomColor}
+      isPlain={isPlain}
       inline
       onClick={isClickable ? handleClick : undefined}
     >

src/components/middle/message/_message-content.scss

@@ -335,6 +335,7 @@
 
     .sender-title {
       overflow: hidden;
+      line-height: normal;
       text-overflow: ellipsis;
     }
 
@@ -416,6 +417,10 @@
       margin-right: -0.1875rem;
     }
 
+    .admin-title-plain {
+      padding-inline: 0.25rem;
+    }
+
     .admin-title {
       font-size: 0.75rem;
       font-weight: var(--font-weight-normal);