From 694529ebded444fd9a6023b0f2992df2cf06647f Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 7 Nov 2022 23:00:35 +0400
Subject: [PATCH] Composer: Less interactive area for Symbol Menu button
 (#2108)

---
 src/components/middle/composer/Composer.scss | 23 ++++++++++++++++++++
 src/components/middle/composer/Composer.tsx  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index 4c7b23319..ff21f6d7a 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/src/components/middle/composer/Composer.scss
@@ -391,6 +391,17 @@
   }
 }
 
+@media (min-width: 600px) {
+  .symbol-menu-button {
+    width: 2rem !important;
+    margin-left: 0.75rem !important;
+
+    .Button + & {
+      margin-left: -0.25rem !important;
+    }
+  }
+}
+
 #message-input-text,
 #caption-input-text {
   position: relative;
@@ -437,11 +448,19 @@
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
+
+    @media (min-width: 600px) {
+      left: 0.75rem;
+    }
   }
 
   .forced-placeholder {
     z-index: var(--z-below);
     left: 0;
+
+    @media (min-width: 600px) {
+      left: 0.75rem;
+    }
   }
 
   &[dir="rtl"] .placeholder-text {
@@ -530,6 +549,10 @@
     .form-control {
       padding-left: 0;
       padding-right: 0;
+
+      @media (min-width: 600px) {
+        padding-left: 0.75rem;
+      }
     }
   }
 
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index a3b6689b6..bd0dcd09b 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1211,7 +1211,7 @@ const Composer: FC<OwnProps & StateProps> = ({
             </Button>
           ) : (
             <ResponsiveHoverButton
-              className={isSymbolMenuOpen ? 'activated' : ''}
+              className={buildClassName('symbol-menu-button', isSymbolMenuOpen && 'activated')}
               round
               color="translucent"
               onActivate={handleActivateSymbolMenu}