From 6dd0e6a4c51191be34d1b254cfdaa3c88ff6f6f3 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Wed, 24 Nov 2021 17:16:18 +0100
Subject: [PATCH] fix: remove `100%` height from tooltip container to fix
 layout issues (#3980)

---
 src/actions/actionCanvas.tsx | 2 +-
 src/components/Tooltip.scss  | 1 -
 src/components/Tooltip.tsx   | 9 ++++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 126fd24b..7c3f9e23 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -160,7 +160,7 @@ export const actionResetZoom = register({
     };
   },
   PanelComponent: ({ updateData, appState }) => (
-    <Tooltip label={t("buttons.resetZoom")}>
+    <Tooltip label={t("buttons.resetZoom")} style={{ height: "100%" }}>
       <ToolButton
         type="button"
         className="reset-zoom-button"
diff --git a/src/components/Tooltip.scss b/src/components/Tooltip.scss
index 6411b2d7..e40f81e6 100644
--- a/src/components/Tooltip.scss
+++ b/src/components/Tooltip.scss
@@ -29,7 +29,6 @@
 // wraps the element we want to apply the tooltip to
 .excalidraw-tooltip-wrapper {
   display: flex;
-  height: 100%;
 }
 
 .excalidraw-tooltip-icon {
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 409676bd..fc1c69c5 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -62,9 +62,15 @@ type TooltipProps = {
   children: React.ReactNode;
   label: string;
   long?: boolean;
+  style?: React.CSSProperties;
 };
 
-export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
+export const Tooltip = ({
+  children,
+  label,
+  long = false,
+  style,
+}: TooltipProps) => {
   useEffect(() => {
     return () =>
       getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
@@ -84,6 +90,7 @@ export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
       onPointerLeave={() =>
         getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
       }
+      style={style}
     >
       {children}
     </div>