fix: fixed the portfolio account detail page layout

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/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/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'>
+          <div className='flex items-center justify-end flex-grow gap-2'>
-            <HealthIcon isLoading={healthFactor === 0} health={health} className='w-5' />
+            <HealthIcon isLoading={healthFactor === 0} health={health} />
-            <HealthBar health={health} healthFactor={healthFactor} className='h-full' />
+            <div className='w-[260px]'>
+              <HealthBar health={health} healthFactor={healthFactor} className='h-3' />
+            </div>
           </div>
         )}
       </div>