From 3e89ff4ae9d74a73272346d7630669bbceb5260e Mon Sep 17 00:00:00 2001
From: "duncan@dtail-design.nl" <duncan@dtail-design.nl>
Date: Mon, 1 Apr 2024 12:03:45 +0200
Subject: [PATCH] fix(interface): z-index and tooltip positioning
---
apps/web/src/app/app.tsx | 4 ++--
.../DatabaseManagement/dbConnectionSelector.tsx | 6 +++---
apps/web/src/components/navbar/navbar.tsx | 2 +-
.../lib/querybuilder/panel/querybuilder.tsx | 16 ++++++++--------
libs/shared/lib/vis/components/bar.tsx | 4 ++--
5 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/apps/web/src/app/app.tsx b/apps/web/src/app/app.tsx
index 152e17855..d8ce9f883 100644
--- a/apps/web/src/app/app.tsx
+++ b/apps/web/src/app/app.tsx
@@ -95,7 +95,7 @@ export function App(props: App) {
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Fit to screen</p>
</TooltipContent>
</Tooltip>
@@ -105,7 +105,7 @@ export function App(props: App) {
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={() => {}} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Mock icon</p>
</TooltipContent>
</Tooltip>
diff --git a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
index b6cd67af0..6ed8758c7 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/dbConnectionSelector.tsx
@@ -133,7 +133,7 @@ export default function DatabaseSelector({}) {
/>
{dbSelectionMenuOpen && session.saveStates !== undefined && (
- <DropdownItemContainer align="top-10 w-full">
+ <DropdownItemContainer align="top-10 w-full z-30">
<li
className="flex items-center p-2 hover:bg-secondary-50 cursor-pointer"
onClick={(e) => {
@@ -215,7 +215,7 @@ export default function DatabaseSelector({}) {
<TooltipTrigger>
<Settings />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Change the connection details</p>
</TooltipContent>
</Tooltip>
@@ -238,7 +238,7 @@ export default function DatabaseSelector({}) {
<TooltipTrigger>
<Delete />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Delete the database</p>
</TooltipContent>
</Tooltip>
diff --git a/apps/web/src/components/navbar/navbar.tsx b/apps/web/src/components/navbar/navbar.tsx
index d00e1be1f..357c4ab59 100644
--- a/apps/web/src/components/navbar/navbar.tsx
+++ b/apps/web/src/components/navbar/navbar.tsx
@@ -55,7 +55,7 @@ export const Navbar = () => {
</div>
{menuOpen && (
- <DropdownItemContainer className="w-56" align="right-3">
+ <DropdownItemContainer className="w-56 z-30" align="right-3">
<div className="p-2 text-sm border-b">
<h2 className="font-bold">user: {authCache.username}</h2>
<h3 className="text-xs break-words">session: {authCache.sessionID}</h3>
diff --git a/libs/shared/lib/querybuilder/panel/querybuilder.tsx b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
index 534da6f04..457b779da 100644
--- a/libs/shared/lib/querybuilder/panel/querybuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/querybuilder.tsx
@@ -449,7 +449,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fitView} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Fit to screen</p>
</TooltipContent>
</Tooltip>
@@ -457,7 +457,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
<TooltipTrigger asChild>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Delete />} onClick={() => clearAllNodes()} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Clear query panel</p>
</TooltipContent>
</Tooltip>
@@ -473,7 +473,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Capture screen</p>
</TooltipContent>
</Tooltip>
@@ -490,7 +490,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Layouts</p>
</TooltipContent>
</Tooltip>
@@ -509,7 +509,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={toggleSettings === 'settings'}>
+ <TooltipContent side={'top'} disabled={toggleSettings === 'settings'}>
<p>Query builder settings</p>
</TooltipContent>
</Tooltip>
@@ -526,7 +526,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Rerun query</p>
</TooltipContent>
</Tooltip>
@@ -544,7 +544,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={toggleSettings === 'logic'}>
+ <TooltipContent side={'top'} disabled={toggleSettings === 'logic'}>
<p>Logic settings</p>
</TooltipContent>
</Tooltip>
@@ -562,7 +562,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
}}
/>
</TooltipTrigger>
- <TooltipContent side={'bottom'} disabled={toggleSettings === 'ml'}>
+ <TooltipContent side={'top'} disabled={toggleSettings === 'ml'}>
<p>Machine learning</p>
</TooltipContent>
</Tooltip>
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index b948e288d..b86b7f5ac 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -69,7 +69,7 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
<TooltipTrigger>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Add visualization</p>
</TooltipContent>
</Tooltip>
@@ -100,7 +100,7 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
<TooltipTrigger>
<Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fullSize} />
</TooltipTrigger>
- <TooltipContent side={'bottom'}>
+ <TooltipContent side={'top'}>
<p>Full screen</p>
</TooltipContent>
</Tooltip>
--
GitLab