Various CSS fixes (#4335)

src/components/common/StickerSet.tsx

@@ -267,9 +267,9 @@ const StickerSet: FC<OwnProps> = ({
     >
       {!shouldHideHeader && (
         <div className="symbol-set-header">
-          <p className={buildClassName('symbol-set-name', withAddSetButton && 'symbol-set-name-external')}>
+          <p className={buildClassName('symbol-set-title', withAddSetButton && 'symbol-set-title-external')}>
             {isLocked && <i className="symbol-set-locked-icon icon icon-lock-badge" />}
-            {stickerSet.title}
+            <span className="symbol-set-name">{stickerSet.title}</span>
             {(isChatEmojiSet || isChatStickerSet) && (
               <span className="symbol-set-chat">{lang(isChatEmojiSet ? 'GroupEmoji' : 'GroupStickers')}</span>
             )}

src/components/middle/composer/SymbolMenu.scss

@@ -187,51 +187,53 @@
     color: rgba(var(--color-text-secondary-rgb), 0.75);
   }
 
-  &-name {
+  &-title {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
     font-size: 1rem;
     line-height: 1.6875rem;
     font-weight: 500;
     margin: 0;
     padding: 0 0.25rem 0.125rem;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: center;
     unicode-bidi: plaintext;
     z-index: 1;
 
     &-external {
       color: var(--color-text);
       text-align: start;
+      margin-right: 0.5rem;
     }
   }
 
+  &-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
+
   &-amount {
-    display: block;
     font-size: 0.875rem;
     font-weight: normal;
     text-align: left;
-    line-height: 1.125rem;
-    margin-top: -0.125rem;
-    margin-bottom: 0.125rem;
     color: rgba(var(--color-text-secondary-rgb), 0.75);
     unicode-bidi: plaintext;
-
-    .symbol-set-locked & {
-      padding-left: 1.25rem;
-    }
+    white-space: nowrap;
   }
 
   &-chat {
     background-color: var(--color-text-secondary);
     color: var(--color-background);
-    border-radius: 0.5rem;
+    border-radius: 1rem;
     padding-inline: 0.25rem;
-    margin-inline-start: 0.5rem;
+    white-space: nowrap;
   }
 
-  &-locked-icon {
-    margin-right: 0.25rem;
+  &-add-button {
+    margin-bottom: 0.25rem;
   }
 
   &-remove {

src/components/middle/message/Giveaway.module.scss

@@ -41,6 +41,7 @@
 
 .section {
   margin-bottom: 1rem;
+  max-width: 100%;
 }
 
 .description {

src/components/middle/message/Giveaway.tsx

@@ -27,8 +27,8 @@ import renderText from '../../common/helpers/renderText';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
-import AnimatedIcon from '../../common/AnimatedIcon';
 import AnimatedIconFromSticker from '../../common/AnimatedIconFromSticker';
+import AnimatedIconWithPreview from '../../common/AnimatedIconWithPreview';
 import PickerSelectedItem from '../../common/PickerSelectedItem';
 import Button from '../../ui/Button';
 import ConfirmDialog from '../../ui/ConfirmDialog';
@@ -304,7 +304,7 @@ const Giveaway = ({
     <div className={styles.root}>
       <div className={buildClassName(styles.sticker, isResults && styles.resultSticker)}>
         {isResults ? (
-          <AnimatedIcon
+          <AnimatedIconWithPreview
             size={RESULT_STICKER_SIZE}
             tgsUrl={LOCAL_TGS_URLS.PartyPopper}
             nonInteractive