From 49a9377c840595bea39a3cc4a5aa5407cd446a2c Mon Sep 17 00:00:00 2001
From: Adam Chambers <adammchambers@gmail.com>
Date: Wed, 29 Nov 2023 15:51:40 -0500
Subject: [PATCH] feat: various responsive improvements

---
 apps/marginfi-v2-ui/src/components/common/PageHeader.tsx    | 2 +-
 .../desktop/DesktopAccountSummary/DesktopAccountSummary.tsx | 6 +++---
 .../UserPositions/UserPositionRow/UserPositionRow.tsx       | 2 +-
 .../components/mobile/MobileAssetsList/MobileAssetsList.tsx | 2 +-
 apps/marginfi-v2-ui/src/pages/index.tsx                     | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx b/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx
index 98a953dfcf..2a5d977ee4 100644
--- a/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/PageHeader.tsx
@@ -13,7 +13,7 @@ const PageHeader: FC<PageHeaderProps> = ({ children }) => {
 
   return (
     <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-y bg-[url('/WaveBG3.png')]">
-      <div className="w-full px-4 sm:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
+      <div className="w-full xl:w-4/5 px-4 xl:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
         <div className="flex gap-4 justify-center items-center">
           <Mobile>
             <div className="ml-[4px]">
diff --git a/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx b/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx
index 9833d0b64d..860cf3c3dd 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx
@@ -22,9 +22,9 @@ const AccountSummary = () => {
   const { connected } = useWalletContext();
 
   return (
-    <div className={cn("flex flex-col lg:flex-row w-full justify-between items-center")}>
+    <div className={cn("flex flex-col py-[10px] px-4 lg:flex-row w-full justify-between items-center")}>
       <div className="font-[500] lg:block w-full h-[118px]">
-        <div className="h-full rounded-xl p-[10px]">
+        <div className="h-full rounded-xl">
           <span className="w-full flex justify-start text-xl">Global stats</span>
           <GlobalStats
             tvl={protocolStats.tvl}
@@ -37,7 +37,7 @@ const AccountSummary = () => {
 
       <div className="w-full">
         {connected && (
-          <div className="font-[500] h-full rounded-xl p-[10px]">
+          <div className="font-[500] h-full rounded-xl">
             <span className="w-full h-full flex justify-start text-xl text-white">Your account</span>
             <UserStats
               accountSummary={isStoreInitialized && selectedAccount ? accountSummary : null}
diff --git a/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx
index 03a75b9c84..eea0ed1c0d 100644
--- a/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx
+++ b/apps/marginfi-v2-ui/src/components/desktop/UserPositions/UserPositionRow/UserPositionRow.tsx
@@ -68,7 +68,7 @@ const UserPositionRow: FC<UserPositionRowProps> = ({ activeBankInfo, marginfiAcc
   return (
     <TableRow className="h-full w-full bg-[#171C1F] border border-[#1E2122] rounded-2xl">
       <TableCell className={`text-white p-0 font-aeonik border-[1px] border-none`}>
-        <div className="flex justify-center items-center px-4 gap-2">
+        <div className="flex xl:justify-center items-center px-4 gap-2">
           {activeBankInfo.meta.tokenLogoUri && (
             <Image
               src={activeBankInfo.meta.tokenLogoUri}
diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
index 5723f70627..d6bffb3d5c 100644
--- a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
+++ b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
@@ -102,7 +102,7 @@ export const MobileAssetsList = () => {
             </Typography>
             {isStoreInitialized && globalBanks ? (
               globalBanks.length > 0 ? (
-                <div className="flex flew-row flex-wrap gap-5 justify-center items-center pt-2">
+                <div className="space-y-5 justify-center items-center pt-2">
                   {globalBanks.map((bank) => {
                     if (poolFilter === "stable" && !STABLECOINS.includes(bank.meta.tokenSymbol)) return null;
                     if (poolFilter === "lst" && !LSTS.includes(bank.meta.tokenSymbol)) return null;
diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
index fd88bd2c31..7dae86c16f 100644
--- a/apps/marginfi-v2-ui/src/pages/index.tsx
+++ b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -87,7 +87,7 @@ const Home = () => {
     <>
       <Desktop>
         <PageHeader>lend</PageHeader>
-        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4">
+        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-full xl:w-4/5 xl:max-w-7xl gap-4">
           {walletAddress && selectedAccount && isOverride && (
             <Banner
               text={`Read-only view of ${selectedAccount.address.toBase58()} (owner: ${shortenAddress(
@@ -107,7 +107,7 @@ const Home = () => {
           )}
           <DesktopAccountSummary />
         </div>
-        <div className="pt-[16px] pb-[64px] grid w-4/5 max-w-7xl gap-4 grid-cols-1 xl:grid-cols-2">
+        <div className="pt-[16px] pb-[64px] px-4 grid w-full xl:w-4/5 xl:max-w-7xl gap-4 grid-cols-1 xl:grid-cols-2">
           <AssetsList />
         </div>
         <OverlaySpinner fetching={!isStoreInitialized || isRefreshingStore} />