Portfolio fix (#809)

* fix: fixed the portfolio account detail page layout

* fix: fixed portfolio cards

* tidy: refactor

src/components/account/Health/HealthBar.tsx

@@ -63,16 +63,22 @@ 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}
             isLoading={healthFactor === 0}
-            className={classNames('mr-2', iconClassName)}
+            className={iconClassName}
             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>
   )
 }

src/components/account/Health/HealthIcon.tsx

@@ -5,7 +5,7 @@ import { ExclamationMarkCircled, Heart } from 'components/common/Icons'
 interface Props {
   isLoading: boolean
   health: number
-  className: string
+  className?: string
   colorClass?: string
 }
 
@@ -14,9 +14,9 @@ export default function HealthIcon(props: Props) {
   const color = colorClass ?? 'text-white'
 
   return (
-    <>
+    <div className='w-5'>
       {!isLoading && health === 0 ? (
-        <ExclamationMarkCircled className={classNames('w-5 text-loss animate-pulse', className)} />
+        <ExclamationMarkCircled className={classNames(' text-loss animate-pulse', className)} />
       ) : (
         <Heart
           className={classNames(
@@ -26,6 +26,6 @@ export default function HealthIcon(props: Props) {
           )}
         />
       )}
-    </>
+    </div>
   )
 }

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(

src/components/portfolio/Account/BreadCrumbs.tsx

@@ -19,7 +19,9 @@ export default function PortfolioAccountPageHeader(props: Props) {
       <NavLink to={getRoute('portfolio', searchParams, address, selectedAccountId)}>
         <Text className='text-white/40'>Portfolio</Text>
       </NavLink>
-      <ArrowRight className='h-3 text-white/60 ' />
+      <div className='h-3'>
+        <ArrowRight className='h-3 text-white/60 ' />
+      </div>
       <Text tag='span'>Credit Account {props.accountId}</Text>
     </div>
   )

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>

src/components/portfolio/SummarySkeleton.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import HealthBar from 'components/account/Health/HealthBar'
 import HealthIcon from 'components/account/Health/HealthIcon'
 import Card from 'components/common/Card'
-import HLSTag from 'components/hls/HLSTag'
 import Loading from 'components/common/Loading'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
+import HLSTag from 'components/hls/HLSTag'
 import useAccount from 'hooks/accounts/useAccount'
 import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants'
 
@@ -31,9 +31,11 @@ export default function SummarySkeleton(props: Props) {
           {account?.kind === 'high_levered_strategy' && <HLSTag />}
         </div>
         {health !== undefined && healthFactor !== undefined && (
-          <div className='flex gap-1 max-w-[300px] flex-grow'>
-            <HealthIcon isLoading={healthFactor === 0} health={health} className='w-5' />
-            <HealthBar health={health} healthFactor={healthFactor} className='h-full' />
+          <div className='flex items-center justify-end flex-grow gap-2'>
+            <HealthIcon isLoading={healthFactor === 0} health={health} />
+            <div className='w-[260px]'>
+              <HealthBar health={health} healthFactor={healthFactor} className='h-3' />
+            </div>
           </div>
         )}
       </div>