Refactor tooltip styles: use data-tooltip-class-name and fix format…

…ting
hyperlane-xyz · Dec 13, 2024 · 4191221 · 4191221
1 parent 5aba67e
commit 4191221
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/src/features/messages/cards/ContentDetailsCard.tsx b/src/features/messages/cards/ContentDetailsCard.tsx
@@ -75,6 +75,7 @@ export function ContentDetailsCard({
           <Tooltip
             id="message-info"
             content="Immutable information about the message itself such as its contents."
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>

diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx
@@ -82,6 +82,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
           <Tooltip
             content="Amounts paid to the Interchain Gas Paymaster for message delivery."
             id="gas-info"
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>

diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx
@@ -182,7 +182,11 @@ function TransactionCard({
         </div>
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
-          <Tooltip id="transaction-info" content={helpText} />
+          <Tooltip
+            id="transaction-info"
+            content={helpText}
+            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
+          />
         </div>
       </div>
       {children}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -12,7 +12,6 @@ import { AppLayout } from '../AppLayout';
 import { ErrorBoundary } from '../components/errors/ErrorBoundary';
 import { config } from '../consts/config';
 import { ChainConfigSyncer } from '../features/chains/ChainConfigSyncer';
-import '../styles/custom.css';
 import { MAIN_FONT } from '../styles/fonts';
 import '../styles/global.css';
 

diff --git a/src/styles/custom.css b/src/styles/custom.css