From 3e74d7bacf7a67de73e00aea21a5cff85bc8a35d Mon Sep 17 00:00:00 2001
From: Majorfi <major@ycorpo.com>
Date: Thu, 19 Dec 2024 10:47:52 +0100
Subject: [PATCH] fix: display of risk/overflow

---
 .../details/tabs/VaultDetailsStrategies.tsx   | 17 +++++----
 .../components/list/VaultsV3ListHead.tsx      |  4 +--
 .../components/list/VaultsV3ListRow.tsx       | 36 +++++++++----------
 pages/v3/index.tsx                            | 10 +++---
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
index dee48413c..d63f50ff3 100755
--- a/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
+++ b/apps/vaults-v3/components/details/tabs/VaultDetailsStrategies.tsx
@@ -85,27 +85,32 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
 
 			<div className={cl(isVaultListEmpty ? 'hidden' : '')}>
 				<div className={'grid grid-cols-12 px-8 pb-6 md:gap-6'}>
-					<div className={'col-span-12 flex w-full flex-col'}>
+					<div className={'col-span-12 flex min-h-[240px] w-full flex-col'}>
 						<VaultsV3ListHead
 							sortBy={sortBy}
 							sortDirection={sortDirection}
 							onSort={(newSortBy: string, newSortDirection: TSortDirection): void => {
+								if (newSortDirection === '') {
+									onChangeSortBy('featuringScore');
+									onChangeSortDirection('');
+									return;
+								}
 								onChangeSortBy(newSortBy as TPossibleSortBy);
 								onChangeSortDirection(newSortDirection as TSortDirection);
 							}}
 							items={[
-								{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
+								{label: 'Vault', value: 'name', sortable: true, className: 'col-span-4'},
+								{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
+								{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 								{
 									label: 'Risk Level',
 									value: 'score',
 									sortable: true,
-									className: 'col-span-1 text-nowrap'
+									className: 'col-span-2 whitespace-nowrap'
 								},
-								{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
-								{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 								{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
 								{label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'},
-								{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'}
+								{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2 justify-end'}
 							]}
 						/>
 						<div className={'grid gap-4'}>
diff --git a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
index 131537841..a739693d3 100644
--- a/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListHead.tsx
@@ -77,9 +77,7 @@ export function VaultsV3ListHead({items, sortBy, sortDirection, onSort}: TListHe
 					</button>
 				</div>
 
-				<div />
-
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-11 gap-1', 'mt-4 md:mt-0')}>
+				<div className={cl('col-span-8 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-1', 'mt-4 md:mt-0')}>
 					{rest.map(
 						(item, index): ReactElement => (
 							<button
diff --git a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
index a5e381ee1..1523c05fe 100755
--- a/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
+++ b/apps/vaults-v3/components/list/VaultsV3ListRow.tsx
@@ -25,22 +25,24 @@ type TAPYSublineProps = {
 function APYSubline({hasPendleArbRewards, hasKelpNEngenlayer, hasKelp}: TAPYSublineProps): ReactElement {
 	if (hasKelpNEngenlayer) {
 		return (
-			<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-4')}>
-				{`+1x Kelp Miles | +1x EigenLayer Points 🚀`}
+			<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
+				{`+1x Kelp Miles`}
+				<br />
+				{'+1x EigenLayer Points'}
 			</small>
 		);
 	}
 	if (hasKelp) {
 		return (
-			<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-4')}>
-				{`+ 1x Kelp Miles 🚀`}
+			<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
+				{`+ 1x Kelp Miles`}
 			</small>
 		);
 	}
 	if (hasPendleArbRewards) {
 		return (
-			<small className={cl('whitespace-nowrap text-xs text-neutral-800 self-end -mb-5 pt-1 -mr-1')}>
-				{`+ 2500 ARB/week 🚀`}
+			<small className={cl('whitespace-nowrap text-xs text-neutral-400 self-end -mb-4 absolute top-6')}>
+				{`+ 2500 ARB/week`}
 			</small>
 		);
 	}
@@ -185,7 +187,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
 
 		if (currentVault.apr?.extra.stakingRewardsAPR > 0) {
 			return (
-				<div className={'flex flex-col items-end md:text-right'}>
+				<div className={'relative flex flex-col items-end md:text-right'}>
 					<span className={'tooltip'}>
 						<b className={'yearn--table-data-section-item-value'}>
 							<Renderable
@@ -223,7 +225,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
 			);
 		}
 		return (
-			<div className={'flex flex-col items-end md:text-right'}>
+			<div className={'relative flex flex-col items-end md:text-right'}>
 				<b className={'yearn--table-data-section-item-value'}>
 					<Renderable
 						shouldRender={!currentVault.apr.forwardAPR?.type.includes('new')}
@@ -320,7 +322,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
 		}
 
 		return (
-			<div className={'flex flex-col items-end md:text-right'}>
+			<div className={'relative flex flex-col items-end md:text-right'}>
 				<span className={'tooltip'}>
 					<b className={'yearn--table-data-section-item-value whitespace-nowrap'}>
 						<Renderable
@@ -390,7 +392,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
 	const hasCurrentAPY = !isZero(currentVault?.apr.forwardAPR.netAPR);
 	if (hasCurrentAPY) {
 		return (
-			<div className={'flex flex-col items-end md:text-right'}>
+			<div className={'relative flex flex-col items-end md:text-right'}>
 				<b className={'yearn--table-data-section-item-value'}>
 					<Renderable
 						shouldRender={!currentVault.apr.forwardAPR?.type.includes('new')}
@@ -416,7 +418,7 @@ function VaultForwardAPY({currentVault}: {currentVault: TYDaemonVault}): ReactEl
 
 	const hasZeroAPY = isZero(currentVault.apr?.netAPR) || Number((currentVault.apr?.netAPR || 0).toFixed(2)) === 0;
 	return (
-		<div className={'flex flex-col items-end md:text-right'}>
+		<div className={'relative flex flex-col items-end md:text-right'}>
 			<b className={'yearn--table-data-section-item-value'}>
 				<Renderable
 					shouldRender={
@@ -524,7 +526,7 @@ function VaultRiskScoreTag({riskLevel}: {riskLevel: number}): ReactElement {
 	const level = riskLevel < 0 ? 0 : riskLevel > 5 ? 5 : riskLevel;
 	const riskColor = [`transparent`, `#63C532`, `#F8A908`, `#F8A908`, `#C73203`, `#C73203`];
 	return (
-		<div className={'col-span-2 flex flex-row justify-between md:col-span-2 md:flex-col md:justify-center'}>
+		<div className={'col-span-2 flex flex-row items-end justify-between md:flex-col md:justify-center'}>
 			<p className={'inline whitespace-nowrap text-start text-xs text-neutral-800/60 md:hidden'}>
 				{'Risk Score'}
 			</p>
@@ -644,7 +646,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 				/>
 
 				<div className={cl('col-span-4 z-10', 'flex flex-row items-center justify-between')}>
-					<div className={'flex flex-row gap-6 overflow-hidden'}>
+					<div className={'flex flex-row gap-6 overflow-hidden pr-10'}>
 						<div className={'mt-2.5 size-8 min-h-8 min-w-8 rounded-full md:flex'}>
 							<ImageWithFallback
 								src={`${process.env.BASE_YEARN_ASSETS_URI}/${currentVault.chainID}/${currentVault.token.address}/logo-128.png`}
@@ -681,11 +683,7 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 					</div>
 				</div>
 
-				<div className={'col-span-1'} />
-
-				<div className={cl('col-span-7 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-4', 'mt-4 md:mt-0')}>
-					<VaultRiskScoreTag riskLevel={currentVault.info.riskLevel} />
-
+				<div className={cl('col-span-8 z-10', 'grid grid-cols-2 md:grid-cols-12 gap-4', 'mt-4 md:mt-0')}>
 					<div
 						className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
 						datatype={'number'}>
@@ -700,6 +698,8 @@ export function VaultsV3ListRow({currentVault}: {currentVault: TYDaemonVault}):
 						<VaultHistoricalAPY currentVault={currentVault} />
 					</div>
 
+					<VaultRiskScoreTag riskLevel={currentVault.info.riskLevel} />
+
 					<div
 						className={'yearn--table-data-section-item col-span-2 flex-row md:flex-col'}
 						datatype={'number'}>
diff --git a/pages/v3/index.tsx b/pages/v3/index.tsx
index 94d2aeb65..08df89a56 100644
--- a/pages/v3/index.tsx
+++ b/pages/v3/index.tsx
@@ -345,18 +345,18 @@ function ListOfVaults(): ReactElement {
 						onChangeSortDirection(newSortDirection as TSortDirection);
 					}}
 					items={[
-						{label: 'Vault', value: 'name', sortable: true, className: 'col-span-2'},
+						{label: 'Vault', value: 'name', sortable: true, className: 'col-span-4'},
+						{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
+						{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 						{
 							label: 'Risk Level',
 							value: 'score',
 							sortable: true,
-							className: 'col-span-1 whitespace-nowrap'
+							className: 'col-span-2 whitespace-nowrap'
 						},
-						{label: 'Est. APY', value: 'estAPY', sortable: true, className: 'col-span-2'},
-						{label: 'Hist. APY', value: 'APY', sortable: true, className: 'col-span-2'},
 						{label: 'Available', value: 'available', sortable: true, className: 'col-span-2'},
 						{label: 'Holdings', value: 'deposited', sortable: true, className: 'col-span-2'},
-						{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2'}
+						{label: 'Deposits', value: 'tvl', sortable: true, className: 'col-span-2 justify-end'}
 					]}
 				/>
 				<div className={'grid gap-4'}>{renderVaultList()}</div>