From 66a4c2aa9a56459a5e0210d1fba9213f282d73fa Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Wed, 14 Feb 2024 13:39:24 +0100
Subject: [PATCH] fix: fixed portfolio cards

---
 src/components/account/Health/HealthBar.tsx | 12 +++++++++---
 src/components/common/Tooltip/index.tsx     |  4 ++--
 src/components/portfolio/Card/Skeleton.tsx  |  4 ++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/account/Health/HealthBar.tsx b/src/components/account/Health/HealthBar.tsx
index 60baafba..41bc951e 100644
--- a/src/components/account/Health/HealthBar.tsx
+++ b/src/components/account/Health/HealthBar.tsx
@@ -63,7 +63,7 @@ export default function HealthBar({
       health={isUpdated ? updatedHealth : health}
       healthFactor={isUpdated ? updatedHealthFactor : healthFactor}
     >
-      <>
+      <div className={classNames('flex w-full', showIcon && 'gap-2')}>
         {showIcon && (
           <HealthIcon
             health={health}
@@ -72,7 +72,13 @@ export default function HealthBar({
             colorClass='text-white'
           />
         )}
-        <div className={classNames('flex w-full', 'rounded-full overflow-hidden', className)}>
+        <div
+          className={classNames(
+            'flex w-full flex-shrink',
+            'rounded-full overflow-hidden',
+            className,
+          )}
+        >
           <svg
             version='1.1'
             xmlns='http://www.w3.org/2000/svg'
@@ -153,7 +159,7 @@ export default function HealthBar({
             )}
           </svg>
         </div>
-      </>
+      </div>
     </HealthTooltip>
   )
 }
diff --git a/src/components/common/Tooltip/index.tsx b/src/components/common/Tooltip/index.tsx
index 85a47f22..1c94c7c1 100644
--- a/src/components/common/Tooltip/index.tsx
+++ b/src/components/common/Tooltip/index.tsx
@@ -48,7 +48,7 @@ export const Tooltip = (props: Props) => {
       visible={props.visible}
     >
       {props.children ? (
-        <span
+        <div
           className={classNames(
             props.underline &&
               'border-b hover:cursor-help  border-dashed border-white/20 pb-1 hover:border-transparent',
@@ -57,7 +57,7 @@ export const Tooltip = (props: Props) => {
           )}
         >
           {props.children}
-        </span>
+        </div>
       ) : (
         <span
           className={classNames(
diff --git a/src/components/portfolio/Card/Skeleton.tsx b/src/components/portfolio/Card/Skeleton.tsx
index 3fb0e2e6..838cda79 100644
--- a/src/components/portfolio/Card/Skeleton.tsx
+++ b/src/components/portfolio/Card/Skeleton.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 
 import HealthBar from 'components/account/Health/HealthBar'
 import Card from 'components/common/Card'
-import HLSTag from 'components/hls/HLSTag'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import HLSTag from 'components/hls/HLSTag'
 
 interface Props {
   stats: { title: React.ReactNode; sub: string }[]
@@ -33,7 +33,7 @@ export default function Skeleton(props: Props) {
           <TitleAndSubCell key={`${accountId}-${sub}`} title={title} sub={sub} />
         ))}
       </div>
-      <div className='flex gap-1 mt-6'>
+      <div className='flex mt-6'>
         <HealthBar health={health} healthFactor={healthFactor} showIcon />
       </div>
     </Card>