feat: style update

libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx

@@ -72,7 +72,7 @@ export const PopUpVis: Story = {
       name: 'Charlotte Henry',
       born: {},
       imdbRank: 21213,
-      imdbVotes: 1213,
+      imdbVotesddddddddddddddddddddd: 1213,
       poster: 'https://image.tmdb.org/t/p/w440_and_h660_face/kTKiREs37qd8GUlNI4Koiupwy6W.jpg',
       tmdbId: '94105',
       country: undefined,

libs/shared/lib/components/CardToolTipVis/index.tsx

@@ -27,13 +27,13 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
 }) => {
   const itemsToShow = Object.entries(data).slice(0, maxVisibleItems);
   return (
-    <div className="border-2 border-sec-200 bg-white ">
-      <div className="flex m-0 items-center border-b-2 border-sec-200">
-        <div className="h-9 w-4" style={{ backgroundColor: colorHeader }}></div>
-        <span className="text-xl ml-2">{name}</span>
+    <div className="border-1 border-sec-200 bg-white w-[17rem] shadow-md">
+      <div className="flex m-0 items-center border-b border-sec-200">
+        <div className="h-9 w-2" style={{ backgroundColor: colorHeader }}></div>
+        <span className="text-xl ml-2 font-semibold">{name}</span>
       </div>
       {type === 'schema' && typeOfSchema === 'relationship' && (
-        <div className="px-4 py-1 border-b-2 border-sec-200">
+        <div className="px-4 py-1 border-b border-sec-200">
           <div className="flex flex-row gap-3 items-center justify-between">
             <span className="font-semibold">From</span>
             <span className="ml-auto text-right">{connectedFrom}</span>
@@ -52,11 +52,11 @@ export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({
             Object.entries(data).map(([k, v]) => (
               <Tooltip key={k}>
                 <div className="flex flex-row gap-3 items-center">
-                  <span className="font-semibold">{k}</span>
+                  <span className="font-semibold truncate w-[40%]">{k}</span>
                   <TooltipTrigger asChild>
-                    <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
+                    <span className="ml-auto text-right truncate w-[60%] min-h-[24px]">
                       {type === 'schema' ? (
-                        <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" />
+                        <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} color="hsl(var(--clr-sec--400))" size={24} />
                       ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
                         <span>{v.toString()}</span>
                       ) : (