From b4f0fb243594c2da24cea660a515ac129aaef3f6 Mon Sep 17 00:00:00 2001
From: JP <jp@k-f.co>
Date: Wed, 17 Apr 2024 04:33:06 -0500
Subject: [PATCH] Improve mobile view (#2085)

---
 .../src/components/Charts/CashflowsChart.tsx  | 20 +++--
 .../src/components/LayoutBase/index.tsx       | 11 ++-
 .../src/components/Menu/GovernanceMenu.tsx    | 13 ++-
 .../src/components/Menu/PageLink.tsx          |  4 +-
 centrifuge-app/src/components/Menu/index.tsx  | 45 ++++++----
 centrifuge-app/src/components/Menu/styles.ts  |  6 +-
 .../src/components/PoolCard/index.tsx         | 90 ++++++++++---------
 .../src/components/PoolFilter/index.tsx       | 38 ++++----
 centrifuge-app/src/components/PoolList.tsx    | 36 +++++---
 .../src/components/PoolOverview/Cashflows.tsx | 40 ++++-----
 .../PoolOverview/TrancheTokenCards.tsx        | 22 +++--
 .../src/components/PoolsTokensShared.tsx      | 11 ++-
 .../src/components/PortfolioCta/index.tsx     |  5 +-
 centrifuge-app/src/pages/Pool/Header.tsx      |  1 +
 .../src/pages/Pool/Overview/index.tsx         | 27 +++---
 15 files changed, 222 insertions(+), 147 deletions(-)

diff --git a/centrifuge-app/src/components/Charts/CashflowsChart.tsx b/centrifuge-app/src/components/Charts/CashflowsChart.tsx
index 7e6b5c044b..b760a85567 100644
--- a/centrifuge-app/src/components/Charts/CashflowsChart.tsx
+++ b/centrifuge-app/src/components/Charts/CashflowsChart.tsx
@@ -74,7 +74,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
 
   return (
     <Stack gap={4}>
-      <Shelf>
+      <Shelf gap={2}>
         <CustomLegend data={today} />
         <Shelf justifyContent="flex-end" pr={1}>
           {chartData.length > 0 &&
@@ -176,16 +176,20 @@ function CustomLegend({
     <Shelf bg="backgroundPage" width="100%" gap={2}>
       <Shelf gap={3}>
         <Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#001C66" gap="4px">
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Total purchases
           </Text>
-          <Text variant="body1">{formatBalance(data.totalPurchases, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.totalPurchases, 'USD', 2)}
+          </Text>
         </Stack>
         <Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#A4D5D8" gap="4px">
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Principal repayments
           </Text>
-          <Text variant="body1">{formatBalance(data.principalRepayments, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.principalRepayments, 'USD', 2)}
+          </Text>
         </Stack>
         <Stack
           borderLeftWidth="3px"
@@ -194,10 +198,12 @@ function CustomLegend({
           borderLeftColor={theme.colors.borderPrimary}
           gap="4px"
         >
-          <Text variant="body3" color="textSecondary">
+          <Text variant="body3" color="textSecondary" whiteSpace="nowrap">
             Interest
           </Text>
-          <Text variant="body1">{formatBalance(data.interest, 'USD', 2)}</Text>
+          <Text variant="body1" whiteSpace="nowrap">
+            {formatBalance(data.interest, 'USD', 2)}
+          </Text>
         </Stack>
         {/* <Stack
           borderLeftWidth="3px"
diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
index 8c860c5f72..6e5a46a6dc 100644
--- a/centrifuge-app/src/components/LayoutBase/index.tsx
+++ b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -1,6 +1,7 @@
 import { WalletMenu } from '@centrifuge/centrifuge-react'
 import { Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Footer } from '../Footer'
 import { LoadBoundary } from '../LoadBoundary'
 import { LogoLink } from '../LogoLink'
@@ -26,6 +27,8 @@ type LayoutBaseProps = {
 }
 
 export function LayoutBase({ children, gap }: LayoutBaseProps) {
+  const isMedium = useIsAboveBreakpoint('M')
+
   return (
     <Root>
       <Inner>
@@ -53,9 +56,11 @@ export function LayoutBase({ children, gap }: LayoutBaseProps) {
           </MainContainer>
         </LoadBoundary>
 
-        <FooterContainer>
-          <Footer />
-        </FooterContainer>
+        {isMedium && (
+          <FooterContainer>
+            <Footer />
+          </FooterContainer>
+        )}
       </Inner>
     </Root>
   )
diff --git a/centrifuge-app/src/components/Menu/GovernanceMenu.tsx b/centrifuge-app/src/components/Menu/GovernanceMenu.tsx
index 7e6d8500ba..74ca2c7260 100644
--- a/centrifuge-app/src/components/Menu/GovernanceMenu.tsx
+++ b/centrifuge-app/src/components/Menu/GovernanceMenu.tsx
@@ -4,16 +4,16 @@ import {
   IconChevronRight,
   IconExternalLink,
   IconGovernance,
-  Menu as Panel,
   MenuItemGroup,
+  Menu as Panel,
   Stack,
   Text,
 } from '@centrifuge/fabric'
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
-import { baseButton } from './styles'
 import { Toggle } from './Toggle'
+import { baseButton } from './styles'
 
 const ExternalLink = styled(Text)`
   ${baseButton}
@@ -24,8 +24,8 @@ const ExternalLink = styled(Text)`
 
   svg {
     display: block;
-    width: ${({ theme }) => theme.sizes.iconSmall}px;
-    height: ${({ theme }) => theme.sizes.iconSmall}px;
+    width: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
+    height: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
     object-fit: contain;
   }
 `
@@ -37,6 +37,7 @@ export function GovernanceMenu() {
   const offset = `calc(100% + 2 * ${space[1]}px)`
   const id = React.useId()
   const isLarge = useIsAboveBreakpoint('L')
+  const isMedium = useIsAboveBreakpoint('M')
 
   return (
     <Box position={['static', 'static', 'relative', 'relative', 'static']}>
@@ -60,6 +61,7 @@ export function GovernanceMenu() {
         aria-label={open ? 'Hide menu' : 'Show menu'}
         onClick={() => setOpen(!open)}
         stacked={!isLarge}
+        isMedium={isMedium}
       >
         <IconGovernance />
         Governance
@@ -123,6 +125,8 @@ const links = [
 ]
 
 function Link({ href, stacked, children }: { href: string; stacked: boolean; children: React.ReactNode }) {
+  const isMedium = useIsAboveBreakpoint('M')
+
   return (
     <ExternalLink
       variant="interactive1"
@@ -131,6 +135,7 @@ function Link({ href, stacked, children }: { href: string; stacked: boolean; chi
       rel="noopener noreferrer"
       href={href}
       stacked={stacked}
+      isMedium={isMedium}
     >
       {children} <IconExternalLink />
     </ExternalLink>
diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
index 52fad348f4..f52d3d30e1 100644
--- a/centrifuge-app/src/components/Menu/PageLink.tsx
+++ b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -1,8 +1,8 @@
 import { Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import { useRouteMatch } from 'react-router'
 import { Link, LinkProps } from 'react-router-dom'
 import styled from 'styled-components'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { prefetchRoute } from '../Root'
 import { baseButton, primaryButton } from './styles'
 
@@ -18,6 +18,7 @@ type PageLinkProps = LinkProps & {
 
 export function PageLink({ stacked = false, to, children }: PageLinkProps) {
   const match = useRouteMatch(to as string)
+  const isMedium = useIsAboveBreakpoint('M')
 
   return (
     <Root
@@ -27,6 +28,7 @@ export function PageLink({ stacked = false, to, children }: PageLinkProps) {
       isActive={Boolean(match)}
       stacked={stacked}
       onMouseOver={() => prefetchRoute(to)}
+      isMedium={isMedium}
     >
       {children}
     </Root>
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
index a7c2bccbcb..a18870a7a1 100644
--- a/centrifuge-app/src/components/Menu/index.tsx
+++ b/centrifuge-app/src/components/Menu/index.tsx
@@ -38,32 +38,43 @@ export function Menu() {
       gap={1}
       flexDirection={['row', 'row', 'column']}
       alignItems={['center', 'center', 'stretch']}
+      justifyContent={['space-between', 'space-between']}
     >
-      <PageLink to="/pools" stacked={!isLarge}>
-        <IconInvestments />
-        Pools
-      </PageLink>
+      <Box width="100%">
+        <PageLink to="/pools" stacked={!isLarge}>
+          <IconInvestments />
+          Pools
+        </PageLink>
+      </Box>
 
-      <PageLink to="/portfolio" stacked={!isLarge}>
-        <IconWallet />
-        Portfolio
-      </PageLink>
+      <Box width="100%">
+        <PageLink to="/portfolio" stacked={!isLarge}>
+          <IconWallet />
+          Portfolio
+        </PageLink>
+      </Box>
 
       {address && (transactions ?? null) && (
-        <PageLink to="/history" stacked={!isLarge}>
-          <IconClock />
-          History
-        </PageLink>
+        <Box width="100%">
+          <PageLink to="/history" stacked={!isLarge}>
+            <IconClock />
+            History
+          </PageLink>
+        </Box>
       )}
 
       {showPrime && (
-        <PageLink to="/prime" stacked={!isLarge}>
-          <IconGlobe />
-          Prime
-        </PageLink>
+        <Box width="100%">
+          <PageLink to="/prime" stacked={!isLarge}>
+            <IconGlobe />
+            Prime
+          </PageLink>
+        </Box>
       )}
 
-      <GovernanceMenu />
+      <Box width="100%">
+        <GovernanceMenu />
+      </Box>
 
       {(pools.length > 0 || config.poolCreationType === 'immediate') && (
         <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
diff --git a/centrifuge-app/src/components/Menu/styles.ts b/centrifuge-app/src/components/Menu/styles.ts
index a31a62e722..fa2afe1127 100644
--- a/centrifuge-app/src/components/Menu/styles.ts
+++ b/centrifuge-app/src/components/Menu/styles.ts
@@ -16,7 +16,7 @@ export const baseButton = css<{ isActive?: boolean }>`
   }
 `
 
-export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
+export const primaryButton = css<{ isActive?: boolean; stacked?: boolean; isMedium?: boolean }>`
   display: grid;
   gap: ${({ stacked, theme }) => (stacked ? 0 : `${theme.space[1]}px`)};
   grid-template-rows: ${({ stacked }) => (stacked ? '20px 1fr' : '1fr')};
@@ -38,8 +38,8 @@ export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
 
   svg {
     display: block;
-    width: ${({ theme }) => theme.sizes.iconSmall}px;
-    height: ${({ theme }) => theme.sizes.iconSmall}px;
+    width: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
+    height: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
     object-fit: contain;
   }
 `
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
index 1ca03daa80..f72dedeeb6 100644
--- a/centrifuge-app/src/components/PoolCard/index.tsx
+++ b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -4,6 +4,7 @@ import Decimal from 'decimal.js-light'
 import { useRouteMatch } from 'react-router'
 import { useTheme } from 'styled-components'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Eththumbnail } from '../EthThumbnail'
 import { Anchor, Ellipsis, Root } from '../ListItemCardStyles'
 import { Tooltips } from '../Tooltips'
@@ -11,7 +12,7 @@ import { PoolStatus, PoolStatusKey } from './PoolStatus'
 
 const columns_base = 'minmax(150px, 2fr) minmax(100px, 1fr) 140px 70px 150px'
 const columns_extended = 'minmax(200px, 2fr) minmax(100px, 1fr) 140px 100px 150px'
-export const COLUMNS = [columns_base, columns_base, columns_base, columns_extended]
+export const COLUMNS = ['minmax(100px, 1fr) 1fr', 'minmax(100px, 1fr) 1fr', columns_base, columns_extended]
 export const COLUMN_GAPS = [3, 3, 6, 8]
 
 export type PoolCardProps = {
@@ -37,6 +38,7 @@ export function PoolCard({
   iconUri,
   isLoading,
 }: PoolCardProps) {
+  const isMedium = useIsAboveBreakpoint('M')
   const basePath = useRouteMatch(['/pools', '/issuer'])?.path || '/pools'
   const { sizes, zIndices } = useTheme()
 
@@ -57,52 +59,58 @@ export function PoolCard({
           </TextWithPlaceholder>
         </Grid>
 
-        <TextWithPlaceholder as="span" variant="body2" color="textSecondary" isLoading={isLoading}>
-          <Ellipsis>{assetClass}</Ellipsis>
-        </TextWithPlaceholder>
+        {isMedium && (
+          <TextWithPlaceholder as="span" variant="body2" color="textSecondary" isLoading={isLoading}>
+            <Ellipsis>{assetClass}</Ellipsis>
+          </TextWithPlaceholder>
+        )}
 
         <TextWithPlaceholder as="span" variant="body1" color="textPrimary" textAlign="right" isLoading={isLoading}>
           <Ellipsis>{valueLocked ? formatBalance(valueLocked, currencySymbol) : '-'}</Ellipsis>
         </TextWithPlaceholder>
 
-        <TextWithPlaceholder
-          as="span"
-          variant="body1"
-          color="textPrimary"
-          fontWeight={500}
-          textAlign="left"
-          isLoading={isLoading}
-          maxLines={1}
-        >
-          <Ellipsis>
-            {apr ? (
-              formatPercentage(apr.toAprPercent(), true, {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 1,
-              })
-            ) : name?.toLowerCase().includes('anemoy') ? (
-              <Tooltips
-                style={{ zIndex: zIndices.overlay }}
-                type="tbillApr"
-                label={
-                  <>
-                    <Text fontWeight={500} variant="body1">
-                      5.0%
-                    </Text>
-                    <Text variant="body3"> target</Text>{' '}
-                  </>
-                }
-              />
-            ) : (
-              '—'
-            )}
-          </Ellipsis>
-          {status === 'Upcoming' && apr ? <Text variant="body3"> target</Text> : ''}
-        </TextWithPlaceholder>
+        {isMedium && (
+          <TextWithPlaceholder
+            as="span"
+            variant="body1"
+            color="textPrimary"
+            fontWeight={500}
+            textAlign="left"
+            isLoading={isLoading}
+            maxLines={1}
+          >
+            <Ellipsis>
+              {apr ? (
+                formatPercentage(apr.toAprPercent(), true, {
+                  minimumFractionDigits: 1,
+                  maximumFractionDigits: 1,
+                })
+              ) : name?.toLowerCase().includes('anemoy') ? (
+                <Tooltips
+                  style={{ zIndex: zIndices.overlay }}
+                  type="tbillApr"
+                  label={
+                    <>
+                      <Text fontWeight={500} variant="body1">
+                        5.0%
+                      </Text>
+                      <Text variant="body3"> target</Text>{' '}
+                    </>
+                  }
+                />
+              ) : (
+                '—'
+              )}
+            </Ellipsis>
+            {status === 'Upcoming' && apr ? <Text variant="body3"> target</Text> : ''}
+          </TextWithPlaceholder>
+        )}
 
-        <Box>
-          <PoolStatus status={status} />
-        </Box>
+        {isMedium && (
+          <Box>
+            <PoolStatus status={status} />
+          </Box>
+        )}
       </Grid>
 
       {status === 'Upcoming' ? null : <Anchor to={`${basePath}/${poolId}`} aria-label={`Go to ${name} details`} />}
diff --git a/centrifuge-app/src/components/PoolFilter/index.tsx b/centrifuge-app/src/components/PoolFilter/index.tsx
index 70f2fc7db3..eb531cea10 100644
--- a/centrifuge-app/src/components/PoolFilter/index.tsx
+++ b/centrifuge-app/src/components/PoolFilter/index.tsx
@@ -1,5 +1,6 @@
 import { Grid, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { COLUMNS, COLUMN_GAPS, PoolCardProps } from '../PoolCard'
 import { PoolStatusKey } from '../PoolCard/PoolStatus'
 import { FilterMenu } from './FilterMenu'
@@ -13,41 +14,46 @@ type PoolFilterProps = {
 const defaultPoolStatus: PoolStatusKey[] = ['Open for investments', 'Upcoming', 'Maker Pool', 'Closed']
 
 export function PoolFilter({ pools }: PoolFilterProps) {
+  const isMedium = useIsAboveBreakpoint('M')
   const [assetClasses, poolStatuses] = React.useMemo(() => {
     if (!pools) {
       return [[], []]
     }
 
-    return [[...new Set(pools.map(({ assetClass }) => assetClass).filter(Boolean))].filter(s => s !== 'Archived'), defaultPoolStatus] as [
-      string[],
-      PoolStatusKey[]
-    ]
+    return [
+      [...new Set(pools.map(({ assetClass }) => assetClass).filter(Boolean))].filter((s) => s !== 'Archived'),
+      defaultPoolStatus,
+    ] as [string[], PoolStatusKey[]]
   }, [pools])
 
   return (
-    <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} alignItems="start" minWidth={970} px={2}>
+    <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} alignItems="start" minWidth={isMedium ? 970 : 0} px={2}>
       <Text as="span" variant="body3">
         Pool name
       </Text>
 
-      <FilterMenu
-        {...poolFilterConfig.assetClass}
-        options={assetClasses}
-        tooltip="Different asset classes to group real-world assets with similar characteristics."
-      />
+      {isMedium && (
+        <FilterMenu
+          {...poolFilterConfig.assetClass}
+          options={assetClasses}
+          tooltip="Different asset classes to group real-world assets with similar characteristics."
+        />
+      )}
 
       <SortButton
         {...poolFilterConfig.valueLocked}
         tooltip="Value locked represents the current total value of pool tokens."
       />
 
-      <SortButton {...poolFilterConfig.apr} justifySelf="start" />
+      {isMedium && <SortButton {...poolFilterConfig.apr} justifySelf="start" />}
 
-      <FilterMenu
-        {...poolFilterConfig.poolStatus}
-        options={poolStatuses}
-        tooltip="Pool status displays the type of pool, if open or closed for investment and if senior tranche is funded by Maker."
-      />
+      {isMedium && (
+        <FilterMenu
+          {...poolFilterConfig.poolStatus}
+          options={poolStatuses}
+          tooltip="Pool status displays the type of pool, if open or closed for investment and if senior tranche is funded by Maker."
+        />
+      )}
     </Grid>
   )
 }
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
index f49c5abe9a..c0d89352db 100644
--- a/centrifuge-app/src/components/PoolList.tsx
+++ b/centrifuge-app/src/components/PoolList.tsx
@@ -6,6 +6,7 @@ import { useLocation } from 'react-router'
 import styled from 'styled-components'
 import { getPoolValueLocked } from '../utils/getPoolValueLocked'
 import { TinlakePool } from '../utils/tinlake/useTinlakePools'
+import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint'
 import { useListedPools } from '../utils/useListedPools'
 import { useMetadataMulti } from '../utils/useMetadata'
 import { COLUMNS, COLUMN_GAPS, PoolCard, PoolCardProps } from './PoolCard'
@@ -30,6 +31,7 @@ export function PoolList() {
   const { search } = useLocation()
   const [showArchived, setShowArchived] = React.useState(false)
   const [listedPools, , metadataIsLoading] = useListedPools()
+  const isMedium = useIsAboveBreakpoint('M')
 
   const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[]
   const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti<PoolMetadata>(
@@ -79,7 +81,7 @@ export function PoolList() {
               </Box>
             </Shelf>
           ) : (
-            <Stack as="ul" role="list" gap={1} minWidth={970} py={1}>
+            <Stack as="ul" role="list" gap={1} minWidth={isMedium ? 970 : 0} py={1}>
               {metadataIsLoading
                 ? Array(6)
                     .fill(true)
@@ -112,26 +114,34 @@ export function PoolList() {
 }
 
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
+  const isMedium = useIsAboveBreakpoint('M')
+
   return (
-    <Stack gap={1}>
-      <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} alignItems="start" minWidth={970} px={2}>
+    <Stack gap={1} overflow="auto">
+      <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} alignItems="start" minWidth={isMedium ? 970 : 0} px={2}>
         <Text as="span" variant="body3">
           Pool name
         </Text>
-        <Text as="span" variant="body3">
-          Asset class
-        </Text>
+        {isMedium && (
+          <Text as="span" variant="body3">
+            Asset class
+          </Text>
+        )}
         <Text as="span" variant="body3" textAlign="right">
           Value locked
         </Text>
-        <Text as="span" variant="body3">
-          APR
-        </Text>
-        <Text as="span" variant="body3">
-          Pool status
-        </Text>
+        {isMedium && (
+          <Text as="span" variant="body3">
+            APR
+          </Text>
+        )}
+        {isMedium && (
+          <Text as="span" variant="body3">
+            Pool status
+          </Text>
+        )}
       </Grid>
-      <Stack as="ul" role="list" gap={1} minWidth={970} py={1}>
+      <Stack as="ul" role="list" gap={1} minWidth={isMedium ? 970 : 0} py={1}>
         {pools.map((pool) => (
           <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
             <PoolCard {...pool} />
diff --git a/centrifuge-app/src/components/PoolOverview/Cashflows.tsx b/centrifuge-app/src/components/PoolOverview/Cashflows.tsx
index 11335d3959..1344e90025 100644
--- a/centrifuge-app/src/components/PoolOverview/Cashflows.tsx
+++ b/centrifuge-app/src/components/PoolOverview/Cashflows.tsx
@@ -1,5 +1,5 @@
 import { CurrencyBalance } from '@centrifuge/centrifuge-js'
-import { AnchorButton, Card, IconDownload, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { AnchorButton, IconDownload, Shelf, Stack, Text } from '@centrifuge/fabric'
 import { useParams } from 'react-router'
 import { formatDate } from '../../utils/date'
 import { formatBalance } from '../../utils/formatting'
@@ -68,25 +68,23 @@ export const Cashflows = () => {
   const csvUrl = csvData?.length ? getCSVDownloadUrl(csvData) : ''
 
   return (
-    <Card p={3}>
-      <Stack gap={2}>
-        <Shelf justifyContent="space-between">
-          <Text fontSize="18px" fontWeight="500">
-            Cashflows
-          </Text>
-          <AnchorButton
-            href={csvUrl}
-            download={`pool-cashflow-data-${poolId}.csv`}
-            variant="secondary"
-            icon={IconDownload}
-            small
-            target="_blank"
-          >
-            Download
-          </AnchorButton>
-        </Shelf>
-        <CashflowsChart poolStates={truncatedPoolStates} pool={pool} />
-      </Stack>
-    </Card>
+    <Stack gap={2}>
+      <Shelf justifyContent="space-between">
+        <Text fontSize="18px" fontWeight="500">
+          Cashflows
+        </Text>
+        <AnchorButton
+          href={csvUrl}
+          download={`pool-cashflow-data-${poolId}.csv`}
+          variant="secondary"
+          icon={IconDownload}
+          small
+          target="_blank"
+        >
+          Download
+        </AnchorButton>
+      </Shelf>
+      <CashflowsChart poolStates={truncatedPoolStates} pool={pool} />
+    </Stack>
   )
 }
diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
index 109b538fd0..6d14a160b2 100644
--- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
+++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
@@ -3,6 +3,7 @@ import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import { InvestButton, Token } from '../../pages/Pool/Overview'
 import { daysBetween } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Tooltips } from '../Tooltips'
 
 export const TrancheTokenCards = ({
@@ -55,6 +56,8 @@ const TrancheTokenCard = ({
   poolCurrencySymbol: string
   trancheText: 'senior' | 'junior' | 'mezzanine'
 }) => {
+  const isMedium = useIsAboveBreakpoint('M')
+
   const isTinlakePool = poolId.startsWith('0x')
   const daysSinceCreation = createdAt ? daysBetween(new Date(createdAt), new Date()) : 0
   const apyTooltipBody =
@@ -72,12 +75,17 @@ const TrancheTokenCard = ({
   }
 
   return (
-    <Box p={2} backgroundColor="backgroundButtonSecondary" borderRadius="card" width={'100%'}>
+    <Box p={2} backgroundColor="backgroundButtonSecondary" borderRadius="card" width="100%" overflow="auto">
       <Stack height="100%" justifyContent="space-between" gap={2}>
         <Text fontSize="12px" variant="body3">
           {trancheToken.name} ({trancheToken.symbol})
         </Text>
-        <Shelf justifyContent="space-between" alignItems="flex-end" gap={1}>
+        <Shelf
+          justifyContent="space-between"
+          alignItems="flex-start"
+          gap={[2, 2, 1]}
+          flexDirection={['column', 'column', 'row']}
+        >
           <Shelf gap={numOfTrancheTokens === 1 ? 5 : 2} alignItems="flex-end">
             <Stack gap={1} paddingRight={numOfTrancheTokens === 1 ? 3 : 0}>
               <Tooltips label={`${poolId === '4139607887' ? 'Target ' : ''}APY`} body={apyTooltipBody} />
@@ -85,10 +93,12 @@ const TrancheTokenCard = ({
                 {calculateApy()}
               </Text>
             </Stack>
-            <Stack gap={1}>
-              <Tooltips variant="secondary" type="subordination" />
-              <Text variant="body2">{formatPercentage(trancheToken.protection)}</Text>
-            </Stack>
+            {isMedium && (
+              <Stack gap={1}>
+                <Tooltips variant="secondary" type="subordination" />
+                <Text variant="body2">{formatPercentage(trancheToken.protection)}</Text>
+              </Stack>
+            )}
             <Stack gap={1}>
               <Text textAlign="left" variant="label2" color="textSecondary">
                 Token price
diff --git a/centrifuge-app/src/components/PoolsTokensShared.tsx b/centrifuge-app/src/components/PoolsTokensShared.tsx
index 41813f3f71..de9d09eca4 100644
--- a/centrifuge-app/src/components/PoolsTokensShared.tsx
+++ b/centrifuge-app/src/components/PoolsTokensShared.tsx
@@ -2,6 +2,7 @@ import { Grid, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useRouteMatch } from 'react-router'
 import { config } from '../config'
+import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint'
 import { CardTotalValueLocked } from './CardTotalValueLocked'
 import { LayoutSection } from './LayoutBase/LayoutSection'
 import { LoadBoundary } from './LoadBoundary'
@@ -15,6 +16,8 @@ type PoolsTokensSharedProps = {
 
 export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
   const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
+  const isMedium = useIsAboveBreakpoint('M')
+
   const links = [
     {
       to: `${basePath}`,
@@ -47,9 +50,11 @@ export function PoolsTokensShared({ title, children }: PoolsTokensSharedProps) {
           </LoadBoundary>
         </Grid>
 
-        <Stack alignItems="end">
-          <MenuSwitch links={links} />
-        </Stack>
+        {isMedium && (
+          <Stack alignItems="end">
+            <MenuSwitch links={links} />
+          </Stack>
+        )}
         {children}
       </Stack>
     </LayoutSection>
diff --git a/centrifuge-app/src/components/PortfolioCta/index.tsx b/centrifuge-app/src/components/PortfolioCta/index.tsx
index 806e89ae5a..0576daea7b 100644
--- a/centrifuge-app/src/components/PortfolioCta/index.tsx
+++ b/centrifuge-app/src/components/PortfolioCta/index.tsx
@@ -1,11 +1,11 @@
 import { useBalances, useCentrifugeConsts, useWallet } from '@centrifuge/centrifuge-react'
 import { Box, Button, Stack, Text } from '@centrifuge/fabric'
-import * as React from 'react'
 import { useTheme } from 'styled-components'
 import { config } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
 import { useAddress } from '../../utils/useAddress'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { useListedPools } from '../../utils/useListedPools'
 import { useComputeLiquidityRewards } from '../LiquidityRewards/hooks'
 import { Cubes } from './Cubes'
@@ -17,6 +17,7 @@ export function PortfolioCta() {
   const balances = useBalances(address)
   const consts = useCentrifugeConsts()
   const [, listedTokens] = useListedPools()
+  const isMedium = useIsAboveBreakpoint('M')
 
   const stakes = balances?.tranches.map(({ poolId, trancheId }) => ({ poolId, trancheId })) ?? []
   const rewards = useComputeLiquidityRewards(address, stakes)
@@ -42,7 +43,7 @@ export function PortfolioCta() {
     },
   ]
 
-  if (address) return null
+  if (address || !isMedium) return null
 
   return (
     <Box
diff --git a/centrifuge-app/src/pages/Pool/Header.tsx b/centrifuge-app/src/pages/Pool/Header.tsx
index 5114cc881e..f7a20459e6 100644
--- a/centrifuge-app/src/pages/Pool/Header.tsx
+++ b/centrifuge-app/src/pages/Pool/Header.tsx
@@ -53,6 +53,7 @@ export const PoolDetailHeader: React.FC<Props> = ({ actions }) => {
       actions={actions}
     >
       <Shelf
+        overflow="auto"
         px={BASE_PADDING}
         bg="backgroundPage"
         style={{
diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
index 8d632f38f9..2fee8e5a30 100644
--- a/centrifuge-app/src/pages/Pool/Overview/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -23,6 +23,7 @@ import { formatBalance } from '../../../utils/formatting'
 import { getPoolValueLocked } from '../../../utils/getPoolValueLocked'
 import { useAverageMaturity } from '../../../utils/useAverageMaturity'
 import { useConnectBeforeAction } from '../../../utils/useConnectBeforeAction'
+import { useIsAboveBreakpoint } from '../../../utils/useIsAboveBreakpoint'
 import { useLoans } from '../../../utils/useLoans'
 import { usePool, usePoolMetadata } from '../../../utils/usePools'
 import { PoolDetailHeader } from '../Header'
@@ -65,6 +66,7 @@ export function PoolDetailOverview() {
   const { data: metadata, isLoading: metadataIsLoading } = usePoolMetadata(pool)
   const averageMaturity = useAverageMaturity(poolId)
   const loans = useLoans(poolId)
+  const isMedium = useIsAboveBreakpoint('M')
 
   const pageSummaryData = [
     {
@@ -105,7 +107,7 @@ export function PoolDetailOverview() {
 
   return (
     <LayoutSection bg={theme.colors.backgroundSecondary} pt={2} pb={4}>
-      <Grid height="fit-content" gridTemplateColumns="66fr minmax(275px, 33fr)" gap={3}>
+      <Grid height="fit-content" gridTemplateColumns={['1fr', '1fr', '66fr minmax(275px, 33fr)']} gap={[2, 2, 3]}>
         <React.Suspense fallback={<Spinner />}>
           <PoolPerformance />
         </React.Suspense>
@@ -133,7 +135,7 @@ export function PoolDetailOverview() {
       </React.Suspense>
       {!isTinlakePool && (
         <>
-          <Grid height="fit-content" gridTemplateColumns="1fr 1fr" gap={3}>
+          <Grid height="fit-content" gridTemplateColumns={['1fr', '1fr', '1fr 1fr']} gap={[2, 2, 3]}>
             <React.Suspense fallback={<Spinner />}>
               <PoolStructure
                 numOfTranches={pool.tranches.length}
@@ -154,14 +156,18 @@ export function PoolDetailOverview() {
                 <AssetsByMaturity />
               </React.Suspense> */}
           </Grid>
+          {isMedium && (
+            <React.Suspense fallback={<Spinner />}>
+              <Box height="100%">
+                <Card p={3} overflow="auto">
+                  <Cashflows />
+                </Card>
+              </Box>
+            </React.Suspense>
+          )}
           <React.Suspense fallback={<Spinner />}>
-            <Box height={373}>
-              <Cashflows />
-            </Box>
-          </React.Suspense>
-          <React.Suspense fallback={<Spinner />}>
-            <Box height={447}>
-              <Card p={3}>
+            <Box height="100%">
+              <Card p={3} overflow="auto">
                 <TransactionHistory poolId={poolId} />
               </Card>
             </Box>
@@ -175,6 +181,7 @@ export function PoolDetailOverview() {
 export function InvestButton(props: InvestRedeemProps) {
   const [open, setOpen] = React.useState(false)
   const connectAndOpen = useConnectBeforeAction(() => setOpen(true))
+  const isMedium = useIsAboveBreakpoint('M')
 
   return (
     <>
@@ -182,7 +189,7 @@ export function InvestButton(props: InvestRedeemProps) {
       <Button
         aria-label={`Invest in ${props.trancheId}`}
         onClick={() => connectAndOpen()}
-        style={{ marginLeft: 'auto' }}
+        style={{ marginLeft: 'auto', width: isMedium ? 'auto' : ' 100%' }}
       >
         Invest
       </Button>