From bc2e0a000a8f0bbb98c3c6a61bdc4e0de5d48006 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Sat, 30 Dec 2023 11:46:04 +0200
Subject: [PATCH] adjust phone tooltip position

---
 app/javascript/application.scss            | 17 +++++++++++++++++
 app/javascript/template_builder/fields.vue |  1 +
 2 files changed, 18 insertions(+)

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 754a2de7..9a220258 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -75,6 +75,23 @@ button[disabled] .enabled {
   @apply select base-input w-full font-normal;
 }
 
+.tooltip-bottom-start:before {
+  transform: translateX(-30%);
+  top: var(--tooltip-offset);
+  left: 100%;
+  right: auto;
+  bottom: auto;
+}
+
+.tooltip-bottom-start:after {
+  transform: translateX(-75%);
+  border-color: transparent transparent var(--tooltip-color) transparent;
+  top: var(--tooltip-tail-offset);
+  left: 50%;
+  right: auto;
+  bottom: auto;
+}
+
 .autocomplete {
   background: white;
   z-index: 1000;
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 241ff6fb..434c8f79 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -92,6 +92,7 @@
       <div
         v-else-if="type == 'phone'"
         class="tooltip tooltip-bottom flex"
+        :class="{'tooltip-bottom-start': !withPayment, 'tooltip-bottom': withPayment }"
         data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
       >
         <a