From 866e6c67056e7681430848218c95d203cdc3ebed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojt=C4=9Bch=20Vidra?= <vojtechvidra@gmail.com>
Date: Fri, 8 Mar 2024 09:02:14 +0100
Subject: [PATCH] fix: tooltip arrow and overlay zIndex (#50)

* fix: tooltip arrow and overlay zIndex

closes #49

* fix: not widely supported text-wrap
---
 workspaces/js/css/template.css | 13 +++++++++++--
 workspaces/js/css/vars.css     |  3 ++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/workspaces/js/css/template.css b/workspaces/js/css/template.css
index e17732f..9bb7c37 100644
--- a/workspaces/js/css/template.css
+++ b/workspaces/js/css/template.css
@@ -64,7 +64,7 @@
   font-size: var(--flows-base-font-size);
   line-height: var(--flows-base-line-height);
   font-weight: 600;
-  text-wrap: nowrap;
+  white-space: nowrap;
   text-decoration: none;
 }
 .flows-primary-btn {
@@ -119,7 +119,6 @@
   border-radius: var(--flows-borderRadius-medium);
   position: absolute;
   padding: var(--flows-tooltip-padding);
-  box-shadow: var(--flows-shadow);
 
   font-family: var(--flows-font-family);
   font-size: var(--flows-base-font-size);
@@ -129,8 +128,18 @@
   min-width: var(--flows-tooltip-minWidth);
   max-width: min(var(--flows-tooltip-maxWidth), calc(100% - 16px));
 }
+.flows-tooltip:before {
+  box-shadow: var(--flows-shadow);
+  border-radius: var(--flows-borderRadius-medium);
+  content: "";
+  position: absolute;
+  inset: calc(var(--flows-borderWidth) * -1);
+  z-index: -1;
+  pointer-events: none;
+}
 .flows-tooltip-overlay {
   position: fixed;
+  z-index: -1;
   pointer-events: none;
 }
 .flows-tooltip-overlay:after {
diff --git a/workspaces/js/css/vars.css b/workspaces/js/css/vars.css
index 6d52b17..29bacf5 100644
--- a/workspaces/js/css/vars.css
+++ b/workspaces/js/css/vars.css
@@ -10,7 +10,8 @@
   --flows-fg-default: #222222;
   --flows-fg-onPrimary: #ffffff;
 
-  --flows-border: 1px solid #cccccc;
+  --flows-borderWidth: 1px;
+  --flows-border: var(--flows-borderWidth) solid #cccccc;
 
   --flows-shadow: 0px 8px 12px rgba(28, 26, 39, 0.08), 0px 6px 8px rgba(28, 26, 39, 0.12),
     0px 0px 1px rgba(28, 26, 39, 0.16);