From 62fd293d04e3a200bd6ded52aaee83562b8a34e0 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Tue, 29 Nov 2022 10:30:25 +0400
Subject: [PATCH] inline tools click on mobile devices improved

---
 docs/CHANGELOG.md                        | 1 +
 src/components/modules/toolbar/inline.ts | 3 ++-
 src/styles/inline-toolbar.css            | 8 +++++---
 src/styles/variables.css                 | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 82370afe..981cd59e 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -15,6 +15,7 @@
 - `Fix` — Pasting from Microsoft Word to Chrome (Mac OS) fixed. Now if there are no image-tools connected, regular text content will be pasted.
 - `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added
 - `Fix` — Toolbox shortcuts appearance and execution fixed [#2112](https://github.com/codex-team/editor.js/issues/2112)
+- `Fix` — Inline Tools click handling on mobile devices improved
 - `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content.
 - `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved
 - `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional.
diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts
index 9b682fb5..e4b5ae12 100644
--- a/src/components/modules/toolbar/inline.ts
+++ b/src/components/modules/toolbar/inline.ts
@@ -68,7 +68,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
   /**
    * Margin above/below the Toolbar
    */
-  private readonly toolbarVerticalMargin: number = 5;
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  private readonly toolbarVerticalMargin: number = _.isMobileScreen() ? 20 : 6;
 
   /**
    * TODO: Get rid of this
diff --git a/src/styles/inline-toolbar.css b/src/styles/inline-toolbar.css
index 00dec993..c935fe5a 100644
--- a/src/styles/inline-toolbar.css
+++ b/src/styles/inline-toolbar.css
@@ -1,6 +1,8 @@
 .ce-inline-toolbar {
+  --y-offset: 8px;
+
   @apply --overlay-pane;
-  transform: translateX(-50%) translateY(8px) scale(0.9);
+  transform: translateX(-50%) translateY(8px) scale(0.94);
   opacity: 0;
   visibility: hidden;
   transition: transform 150ms ease, opacity 250ms ease;
@@ -16,7 +18,7 @@
   }
 
   &--left-oriented {
-    transform: translateX(-23px) translateY(8px) scale(0.9);
+    transform: translateX(-23px) translateY(8px) scale(0.94);
   }
 
   &--left-oriented&--showed {
@@ -24,7 +26,7 @@
   }
 
   &--right-oriented {
-    transform: translateX(-100%) translateY(8px) scale(0.9);
+    transform: translateX(-100%) translateY(8px) scale(0.94);
     margin-left: 23px;
   }
 
diff --git a/src/styles/variables.css b/src/styles/variables.css
index ba265be1..8c600cda 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -59,7 +59,7 @@
    * Size of svg icons got from the CodeX Icons pack
    */
   --icon-size: 20px;
-  --icon-size--mobile: 30px;
+  --icon-size--mobile: 28px;
 
 
   /**