Zoom-in gifts on hover

src/components/common/gift/SavedGift.tsx

@@ -147,7 +147,7 @@ const SavedGift = ({
   return (
     <div
       ref={ref}
-      className={buildClassName(styles.root, 'scroll-item')}
+      className={buildClassName('interactive-gift scroll-item', styles.root)}
       style={style}
       onClick={handleClick}
       onContextMenu={handleContextMenu}

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

@@ -31,9 +31,6 @@
 
 .stickerWrapper {
   position: relative;
-
-  overflow: hidden;
-
   width: 7.5rem;
   height: 7.5rem;
   margin-block: 0.5rem;

src/components/middle/message/WebPageUniqueGift.tsx

@@ -3,6 +3,7 @@ import { memo, useRef } from '@teact';
 import type { ApiStarGiftUnique } from '../../../api/types';
 
 import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment.ts';
+import buildClassName from '../../../util/buildClassName.ts';
 import { getGiftAttributes } from '../../common/helpers/gifts';
 
 import useFlag from '../../../hooks/useFlag.ts';
@@ -39,7 +40,7 @@ const WebPageUniqueGift = ({
 
   return (
     <div
-      className={styles.root}
+      className={buildClassName('interactive-gift', styles.root)}
       onClick={onClick}
       onMouseEnter={!IS_TOUCH_ENV ? markHover : undefined}
       onMouseLeave={!IS_TOUCH_ENV ? unmarkHover : undefined}

src/components/middle/message/actions/StarGift.tsx

@@ -123,7 +123,7 @@ const StarGiftAction = ({
   return (
     <div
       ref={ref}
-      className={buildClassName(styles.contentBox, styles.starGift)}
+      className={buildClassName('interactive-gift', styles.contentBox, styles.starGift)}
       tabIndex={0}
       role="button"
       onClick={onClick}

src/components/middle/message/actions/StarGiftUnique.tsx

@@ -85,7 +85,7 @@ const StarGiftAction = ({
 
   return (
     <div
-      className={buildClassName(styles.contentBox, styles.starGift, styles.uniqueGift)}
+      className={buildClassName('interactive-gift', styles.contentBox, styles.starGift, styles.uniqueGift)}
       tabIndex={0}
       role="button"
       onClick={onClick}

src/components/modals/gift/GiftItemStar.tsx

@@ -167,6 +167,7 @@ function GiftItemStar({
     <div
       ref={ref}
       className={buildClassName(
+        'interactive-gift',
         styles.container,
         styles.starGift,
         'starGiftItem',

src/components/modals/gift/UniqueGiftHeader.tsx

@@ -76,7 +76,7 @@ const UniqueGiftHeader = ({
     <div className={buildClassName(styles.root, className)}>
       <Transition
         className={styles.transition}
-        slideClassName={styles.transitionSlide}
+        slideClassName={buildClassName('interactive-gift', styles.transitionSlide)}
         activeKey={activeKey}
         direction={1}
         name="zoomBounceSemiFade"

src/styles/index.scss

@@ -54,8 +54,10 @@ noscript {
 
   width: 100%;
   height: 100%;
+
   .nojs-video {
     pointer-events: none;
+
     &::-webkit-media-controls {
       display: none;
     }
@@ -265,6 +267,20 @@ body:not(.is-ios) {
   }
 }
 
+.interactive-gift {
+  canvas {
+    transition: 250ms transform;
+  }
+
+  @media (hover: hover) {
+    &:hover, &:focus-visible {
+      canvas {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
 .color-primary {
   color: var(--color-primary) !important;
 }