diff --git a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx b/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx index 2d122715a863b3e5cdc7728cfa3f65d38183abc9..c52d50edc4463207c4bc6f0ffc62a423cfbea283 100644 --- a/libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx +++ b/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, diff --git a/libs/shared/lib/components/CardToolTipVis/index.tsx b/libs/shared/lib/components/CardToolTipVis/index.tsx index cea7808315cad47ab25b7c6503ff19dd74ef3b21..fc13c8c6305e47a362af1408ddda53aa1872d4a0 100644 --- a/libs/shared/lib/components/CardToolTipVis/index.tsx +++ b/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> ) : (