feat: various responsive improvements

mrgnlabs · Nov 29, 2023 · 49a9377 · 49a9377 · vercel · Nov 29, 2023
1 parent d0d0203
commit 49a9377
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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} />