Refactor TdHandler and Tooltip components with minor styling adjustments

Consensys · Dec 7, 2024 · 3425718 · 3425718
1 parent 40acc6d
commit 3425718
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/explorer/src/components/DataTable/components/TdHandler/index.tsx b/explorer/src/components/DataTable/components/TdHandler/index.tsx
@@ -6,29 +6,29 @@ import { ITdHandler } from "./interface";
 
 export const TdHandler: React.FC<ITdHandler> = ({ value, valueUrl, to, isTextLeft = false }) => {
   return (
-    <div className="flex items-center justify-end gap-2">
+    <div className="flex items-center justify-end gap-1 min-w-[120px]">
       {valueUrl ? (
         <a
           href={valueUrl}
           target="_blank"
           onClick={(e) => e.stopPropagation()}
-          className={`hover:underline ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${
-            isTextLeft ? "group-hover:translate-x-5" : "group-hover:translate-x-0"
+          className={`hover:underline ${isTextLeft ? "translate-x-0" : "translate-x-2"} ${
+            isTextLeft ? "group-hover:translate-x-2" : "group-hover:translate-x-0"
           } transition max-w-[300px] overflow-hidden text-ellipsis`}
         >
           {value}
         </a>
       ) : (
         <p
-          className={`w-full text-${isTextLeft ? "left" : "right"} ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${
-            isTextLeft ? "group-hover:-translate-x-5" : "group-hover:translate-x-0"
+          className={`w-full text-${isTextLeft ? "left" : "right"} ${isTextLeft ? "translate-x-0" : "translate-x-2"} ${
+            isTextLeft ? "group-hover:-translate-x-2" : "group-hover:translate-x-0"
           } transition max-w-[300px] overflow-hidden text-ellipsis`}
         >
           {value}
         </p>
       )}
       <Link to={to} onClick={(e) => e.stopPropagation()}>
-        <ChevronRight className="w-5 opacity-0 group-hover:opacity-100 transition" />
+        <ChevronRight className="w-4 opacity-0 group-hover:opacity-100 transition" />
       </Link>
     </div>
   );

diff --git a/explorer/src/components/Tooltip/index.tsx b/explorer/src/components/Tooltip/index.tsx
@@ -56,7 +56,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, children, placement =
           ref={refs.setFloating}
           style={{ ...floatingStyles, zIndex: 1000 }}
           {...getFloatingProps()}
-          className={`p-2 rounded-md ${
+          className={`p-2 rounded-md min-w-[250px] ${
             isDarkMode ? "bg-whiteDefault text-blackDefault" : "bg-blackDefault text-whiteDefault"
           }`}
         >