From c3e881ed77c3829894326e03becae67a6307356d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 8 Sep 2021 15:22:38 +0530
Subject: [PATCH] fix: tooltip position on containers with overflow

---
 components/http/Request.vue |  16 ++++-
 package-lock.json           | 122 ++++++++++++++++++------------------
 package.json                |   6 +-
 plugins/v-tippy.js          |   7 +++
 4 files changed, 86 insertions(+), 65 deletions(-)

diff --git a/components/http/Request.vue b/components/http/Request.vue
index d99f7866..e11bd6aa 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,5 +1,17 @@
 <template>
-  <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
+  <div
+    class="
+      bg-primary
+      flex
+      space-x-2
+      p-4
+      top-0
+      z-10
+      sticky
+      overflow-x-auto
+      hide-scrollbar
+    "
+  >
     <div class="flex flex-1">
       <div class="flex relative">
         <label for="method">
@@ -57,6 +69,7 @@
             flex-1
             rounded-r
             text-secondaryDark
+            min-w-32
             py-1
             px-4
             hover:border-dividerDark
@@ -77,6 +90,7 @@
             flex
             text-secondaryDark
             w-full
+            min-w-32
             py-2
             px-4
             hover:border-dividerDark
diff --git a/package-lock.json b/package-lock.json
index 897a20ee..098126f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,7 @@
         "vue-functional-data-merge": "^3.1.0",
         "vue-github-button": "^1.3.0",
         "vue-textarea-autosize": "^1.1.1",
-        "vue-tippy": "^4.10.2",
+        "vue-tippy": "^4.11.0",
         "vuejs-auto-complete": "^0.9.0",
         "yargs-parser": "^20.2.9"
       },
@@ -63,7 +63,7 @@
         "@types/cookie": "^0.4.1",
         "@types/lodash": "^4.14.172",
         "@types/splitpanes": "^2.2.1",
-        "@vue/runtime-dom": "^3.2.9",
+        "@vue/runtime-dom": "^3.2.10",
         "@vue/test-utils": "^1.2.2",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^27.1.0",
@@ -87,7 +87,7 @@
         "stylelint-config-standard": "^22.0.0",
         "ts-jest": "^27.0.5",
         "typescript": "^4.2",
-        "unplugin-vue2-script-setup": "^0.5.7",
+        "unplugin-vue2-script-setup": "^0.5.8",
         "vue-jest": "^3.0.7",
         "worker-loader": "^3.0.8"
       }
@@ -9036,18 +9036,18 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.9.tgz",
-      "integrity": "sha512-V0me78KlETt/9u3S9BoViEZNCFr/fDWodLq/KqYbFj+YySnCDD0clmjgBSQvIM63D+z3iUXftJyv08vAjlWrvw==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.10.tgz",
+      "integrity": "sha512-99y12RahDwBC75NwX9aFDXKLSvW66gMjl/9CNrufGQTth2fWadGxJedvKXs46ZPyiu7bFMERLY9X9Jz4GWOIDw==",
       "dev": true,
       "dependencies": {
-        "@vue/shared": "3.2.9"
+        "@vue/shared": "3.2.10"
       }
     },
     "node_modules/@vue/reactivity/node_modules/@vue/shared": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-      "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+      "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
       "dev": true
     },
     "node_modules/@vue/ref-transform": {
@@ -9063,36 +9063,36 @@
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.9.tgz",
-      "integrity": "sha512-CaSjy/kBrSFtSwyW2sY7RTN5YGmcDg8xLzKmFmIrkI9AXv/YjViQjSKUNHTAhnGq0K739vhFO4r3meBNEWqiOw==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.10.tgz",
+      "integrity": "sha512-zErVTTpIqjiHtC6A7TeH3/LR21/tAW3O9qkyYAwMIq/cZFvH7C4XVJhCk8C3bEZDc5vxT5uQ83mE6sxU8bJqwg==",
       "dev": true,
       "dependencies": {
-        "@vue/reactivity": "3.2.9",
-        "@vue/shared": "3.2.9"
+        "@vue/reactivity": "3.2.10",
+        "@vue/shared": "3.2.10"
       }
     },
     "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-      "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+      "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
       "dev": true
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.9.tgz",
-      "integrity": "sha512-Vi8eOaP7/8NYSWIl8/klPtkiI+IQq/gPAI77U7PVoJ22tTcK/+9IIrMEN2TD+jUkHTRRIymMECEv+hWQT1Mo1g==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.10.tgz",
+      "integrity": "sha512-T9yri+ejTDLVMoKLTdilRw6vEKkCo7O82EkGJlV6lspEDCxgCDhfYrBlJRbx2SRd2fBHJ6R+c9ZVHpK4CYUtqQ==",
       "dev": true,
       "dependencies": {
-        "@vue/runtime-core": "3.2.9",
-        "@vue/shared": "3.2.9",
+        "@vue/runtime-core": "3.2.10",
+        "@vue/shared": "3.2.10",
         "csstype": "^2.6.8"
       }
     },
     "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-      "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+      "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
       "dev": true
     },
     "node_modules/@vue/shared": {
@@ -32923,9 +32923,9 @@
       }
     },
     "node_modules/unplugin-vue2-script-setup": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.7.tgz",
-      "integrity": "sha512-Dy08dFieMMQ1xS1ixOOBWc5SjiMatuVW/tmQMVUZu086L/mGWZuZNfDQ5L0kdMOEQnATOyINnqw/f0tKI/n65A==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.8.tgz",
+      "integrity": "sha512-404IblNrW59LVaSx73Sk/XaHLOWs+WKUxL8V2qkqw5mHeiu6PJ1x1wjNsalPF4esXCnvlnLZtpabnr2gYEgHXA==",
       "dependencies": {
         "@babel/core": "^7.15.0",
         "@babel/generator": "^7.15.0",
@@ -34170,9 +34170,9 @@
       "hasInstallScript": true
     },
     "node_modules/vue-tippy": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",
-      "integrity": "sha512-o1E4Q7gJHrL5VKpPF10Mdp9Grrqi9JGUBrkOQQUmTrklxctYvjpsSxePZVM0mgfGfRFAboOClw33X1ueB4Byjw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.11.0.tgz",
+      "integrity": "sha512-dPVErfe3Gpj9S42fSliD20aw9In1AqWW7rHwpjLmVynxYfKFZhgxxKLCIdrwYibPtGAtIW9sZ/8PdVGbtgHGng==",
       "dependencies": {
         "humps": "^2.0.1",
         "tippy.js": "^4.3.5"
@@ -42834,18 +42834,18 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.9.tgz",
-      "integrity": "sha512-V0me78KlETt/9u3S9BoViEZNCFr/fDWodLq/KqYbFj+YySnCDD0clmjgBSQvIM63D+z3iUXftJyv08vAjlWrvw==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.10.tgz",
+      "integrity": "sha512-99y12RahDwBC75NwX9aFDXKLSvW66gMjl/9CNrufGQTth2fWadGxJedvKXs46ZPyiu7bFMERLY9X9Jz4GWOIDw==",
       "dev": true,
       "requires": {
-        "@vue/shared": "3.2.9"
+        "@vue/shared": "3.2.10"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.9",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-          "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+          "version": "3.2.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+          "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
           "dev": true
         }
       }
@@ -42863,38 +42863,38 @@
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.9.tgz",
-      "integrity": "sha512-CaSjy/kBrSFtSwyW2sY7RTN5YGmcDg8xLzKmFmIrkI9AXv/YjViQjSKUNHTAhnGq0K739vhFO4r3meBNEWqiOw==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.10.tgz",
+      "integrity": "sha512-zErVTTpIqjiHtC6A7TeH3/LR21/tAW3O9qkyYAwMIq/cZFvH7C4XVJhCk8C3bEZDc5vxT5uQ83mE6sxU8bJqwg==",
       "dev": true,
       "requires": {
-        "@vue/reactivity": "3.2.9",
-        "@vue/shared": "3.2.9"
+        "@vue/reactivity": "3.2.10",
+        "@vue/shared": "3.2.10"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.9",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-          "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+          "version": "3.2.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+          "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
           "dev": true
         }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.9.tgz",
-      "integrity": "sha512-Vi8eOaP7/8NYSWIl8/klPtkiI+IQq/gPAI77U7PVoJ22tTcK/+9IIrMEN2TD+jUkHTRRIymMECEv+hWQT1Mo1g==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.10.tgz",
+      "integrity": "sha512-T9yri+ejTDLVMoKLTdilRw6vEKkCo7O82EkGJlV6lspEDCxgCDhfYrBlJRbx2SRd2fBHJ6R+c9ZVHpK4CYUtqQ==",
       "dev": true,
       "requires": {
-        "@vue/runtime-core": "3.2.9",
-        "@vue/shared": "3.2.9",
+        "@vue/runtime-core": "3.2.10",
+        "@vue/shared": "3.2.10",
         "csstype": "^2.6.8"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.9",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.9.tgz",
-          "integrity": "sha512-+CifxkLVhjKT14g/LMZil8//SdCzkMkS8VfRX0cqNJiFKK4AWvxj0KV1dhbr8czikY0DZUGQew3tRMRRChMGtA==",
+          "version": "3.2.10",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.10.tgz",
+          "integrity": "sha512-Z5hbCx5jqAK0kscWcsVBpEeS0LfuSjgnkCBewQfsdBRyvHdJWKRUnCAJ7GqJO/iJtjSZHBFJYNoYyP7a/goh2A==",
           "dev": true
         }
       }
@@ -61415,9 +61415,9 @@
       }
     },
     "unplugin-vue2-script-setup": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.7.tgz",
-      "integrity": "sha512-Dy08dFieMMQ1xS1ixOOBWc5SjiMatuVW/tmQMVUZu086L/mGWZuZNfDQ5L0kdMOEQnATOyINnqw/f0tKI/n65A==",
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/unplugin-vue2-script-setup/-/unplugin-vue2-script-setup-0.5.8.tgz",
+      "integrity": "sha512-404IblNrW59LVaSx73Sk/XaHLOWs+WKUxL8V2qkqw5mHeiu6PJ1x1wjNsalPF4esXCnvlnLZtpabnr2gYEgHXA==",
       "requires": {
         "@babel/core": "^7.15.0",
         "@babel/generator": "^7.15.0",
@@ -62399,9 +62399,9 @@
       }
     },
     "vue-tippy": {
-      "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.10.2.tgz",
-      "integrity": "sha512-o1E4Q7gJHrL5VKpPF10Mdp9Grrqi9JGUBrkOQQUmTrklxctYvjpsSxePZVM0mgfGfRFAboOClw33X1ueB4Byjw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-4.11.0.tgz",
+      "integrity": "sha512-dPVErfe3Gpj9S42fSliD20aw9In1AqWW7rHwpjLmVynxYfKFZhgxxKLCIdrwYibPtGAtIW9sZ/8PdVGbtgHGng==",
       "requires": {
         "humps": "^2.0.1",
         "tippy.js": "^4.3.5"
diff --git a/package.json b/package.json
index 71b1e714..94374cc7 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "vue-functional-data-merge": "^3.1.0",
     "vue-github-button": "^1.3.0",
     "vue-textarea-autosize": "^1.1.1",
-    "vue-tippy": "^4.10.2",
+    "vue-tippy": "^4.11.0",
     "vuejs-auto-complete": "^0.9.0",
     "yargs-parser": "^20.2.9"
   },
@@ -79,7 +79,7 @@
     "@types/cookie": "^0.4.1",
     "@types/lodash": "^4.14.172",
     "@types/splitpanes": "^2.2.1",
-    "@vue/runtime-dom": "^3.2.9",
+    "@vue/runtime-dom": "^3.2.10",
     "@vue/test-utils": "^1.2.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.1.0",
@@ -103,7 +103,7 @@
     "stylelint-config-standard": "^22.0.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.2",
-    "unplugin-vue2-script-setup": "^0.5.7",
+    "unplugin-vue2-script-setup": "^0.5.8",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   }
diff --git a/plugins/v-tippy.js b/plugins/v-tippy.js
index 4df19159..04d52309 100644
--- a/plugins/v-tippy.js
+++ b/plugins/v-tippy.js
@@ -5,5 +5,12 @@ Vue.use(VueTippy, {
   a11y: false,
   animateFill: false,
   arrowType: "round",
+  popperOptions: {
+    modifiers: {
+      preventOverflow: {
+        boundariesElement: "window",
+      },
+    },
+  },
 })
 Vue.component("Tippy", TippyComponent)