Merge pull request #1802 from Web3Auth/fix/tooltip-overflow

Fix tooltip overflow issue for languages like dutch and german
Web3Auth · Apr 26, 2024 · a931e1d · a931e1d
2 parents 7cf6c0c + 0ac42e6
commit a931e1d
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 53 deletions.
diff --git a/demo/react-app/package-lock.json b/demo/react-app/package-lock.json
diff --git a/demo/react-app/package.json b/demo/react-app/package.json
@@ -60,4 +60,4 @@
     "typescript": "^5.2.2",
     "webpack-bundle-analyzer": "^4.9.1"
   }
-}
+}
diff --git a/demo/react-app/src/services/web3auth.tsx b/demo/react-app/src/services/web3auth.tsx
@@ -7,7 +7,7 @@ import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { createContext, FunctionComponent, ReactNode, useCallback, useContext, useEffect, useState } from "react";
 import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
 import { getWalletProvider, IWalletProvider } from "./walletProvider";
-import { PLUGIN_EVENTS } from "@web3auth/base-plugin";
+import { PLUGIN_EVENTS } from "@web3auth/base";
 
 export interface IWeb3AuthContext {
   web3Auth: Web3Auth | null;

diff --git a/packages/ui/src/components/Header.tsx b/packages/ui/src/components/Header.tsx
@@ -20,6 +20,8 @@ function Header(props: HeaderProps) {
 
   const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
 
+  const subtitle = t("modal.header-subtitle-name", { appName });
+
   return (
     <div className="w3a-modal__header">
       <div className="w3a-header">
@@ -31,12 +33,14 @@ function Header(props: HeaderProps) {
           )}
           <div className="w3a-header__title">{t("modal.header-title")}</div>
           <div className="w3a-header__subtitle">
-            {t("modal.header-subtitle-name", { appName })}
+            {subtitle}
             <div className="relative flex flex-col items-center group cursor-pointer">
               <Icon iconName={`information-circle${isDark ? "-light" : ""}`} />
               <div className="absolute top-4 z-20 flex-col items-center hidden mb-5 group-hover:flex">
                 <div className="w-3 h-3 ml-[3px] -mb-2 rotate-45 bg-app-gray-50 dark:bg-app-gray-600" />
-                <div className="relative -ml-[100px] p-4 w-[300px] text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg">
+                <div
+                  className={`relative p-4 w-[270px] -translate-x-16 text-xs leading-none text-app-white rounded-md bg-app-gray-50 dark:bg-app-gray-600 shadow-lg ${subtitle.length > 34 ? "-ml-[100px]" : ""}`}
+                >
                   <div className="text-xs font-medium mb-1 text-app-gray-900 dark:text-app-white">{t("modal.header-tooltip-title")}</div>
                   <div className="text-xs text-app-gray-400">{t("modal.header-tooltip-desc")}</div>
                 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,4 +60,4 @@ @@
         "typescript": "^5.2.2",
         "webpack-bundle-analyzer": "^4.9.1"
       }
-    }
+    }