From 4487370790d77163c199184546689bf10a6c1731 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 15 Aug 2025 18:25:37 +0200
Subject: [PATCH] Zoom-in gifts on hover

---
 src/components/common/gift/SavedGift.tsx         |  2 +-
 .../middle/message/WebPageUniqueGift.module.scss |  3 ---
 .../middle/message/WebPageUniqueGift.tsx         |  3 ++-
 .../middle/message/actions/StarGift.tsx          |  2 +-
 .../middle/message/actions/StarGiftUnique.tsx    |  2 +-
 src/components/modals/gift/GiftItemStar.tsx      |  1 +
 src/components/modals/gift/UniqueGiftHeader.tsx  |  2 +-
 src/styles/index.scss                            | 16 ++++++++++++++++
 8 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/common/gift/SavedGift.tsx b/src/components/common/gift/SavedGift.tsx
index 404b71687..160619b4a 100644
--- a/src/components/common/gift/SavedGift.tsx
+++ b/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}
diff --git a/src/components/middle/message/WebPageUniqueGift.module.scss b/src/components/middle/message/WebPageUniqueGift.module.scss
index 530066d4c..04deacbaa 100644
--- a/src/components/middle/message/WebPageUniqueGift.module.scss
+++ b/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;
diff --git a/src/components/middle/message/WebPageUniqueGift.tsx b/src/components/middle/message/WebPageUniqueGift.tsx
index 6ba42b7cf..190416d8d 100644
--- a/src/components/middle/message/WebPageUniqueGift.tsx
+++ b/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}
diff --git a/src/components/middle/message/actions/StarGift.tsx b/src/components/middle/message/actions/StarGift.tsx
index 5703fe565..d2e881e02 100644
--- a/src/components/middle/message/actions/StarGift.tsx
+++ b/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}
diff --git a/src/components/middle/message/actions/StarGiftUnique.tsx b/src/components/middle/message/actions/StarGiftUnique.tsx
index 38ebf3382..aee0a352c 100644
--- a/src/components/middle/message/actions/StarGiftUnique.tsx
+++ b/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}
diff --git a/src/components/modals/gift/GiftItemStar.tsx b/src/components/modals/gift/GiftItemStar.tsx
index cec7ba3a0..8838c7dda 100644
--- a/src/components/modals/gift/GiftItemStar.tsx
+++ b/src/components/modals/gift/GiftItemStar.tsx
@@ -167,6 +167,7 @@ function GiftItemStar({
     <div
       ref={ref}
       className={buildClassName(
+        'interactive-gift',
         styles.container,
         styles.starGift,
         'starGiftItem',
diff --git a/src/components/modals/gift/UniqueGiftHeader.tsx b/src/components/modals/gift/UniqueGiftHeader.tsx
index fb124c623..560aaafca 100644
--- a/src/components/modals/gift/UniqueGiftHeader.tsx
+++ b/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"
diff --git a/src/styles/index.scss b/src/styles/index.scss
index aa0d22c2f..d43c4b63d 100644
--- a/src/styles/index.scss
+++ b/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;
 }