fix: centre align views on mobile

src/app/(mobile-ui)/request/create/page.tsx

@@ -11,7 +11,7 @@ export const metadata = generateMetadata({
 
 export default function RequestCreate() {
     return (
-        <PageContainer className="self-start">
+        <PageContainer className="h-full min-h-[inherit] w-full md:self-start">
             <CreateRequestLinkView />
         </PageContainer>
     )

src/app/(mobile-ui)/send/page.tsx

@@ -12,7 +12,7 @@ export const metadata = generateMetadata({
 
 export default function SendPage() {
     return (
-        <PageContainer className="self-start">
+        <PageContainer className="h-full min-h-[inherit] w-full md:self-start">
             <SendRouterView />
         </PageContainer>
     )

src/app/(mobile-ui)/withdraw/[country]/bank/page.tsx

@@ -180,7 +180,7 @@ export default function WithdrawBankPage() {
     }
 
     return (
-        <div className="flex h-full w-full flex-col justify-start gap-8 self-start">
+        <div className="flex h-full min-h-[inherit] w-full flex-col justify-start gap-8 self-start">
             <NavHeader
                 title="Withdraw"
                 icon={view === 'SUCCESS' ? 'cancel' : undefined}

src/components/AddMoney/components/AddMoneyBankDetails.tsx

@@ -133,7 +133,7 @@ Please use these details to complete your bank transfer.`
     }
 
     return (
-        <div className="flex h-full w-full flex-col justify-start gap-8 self-start">
+        <div className="flex h-full min-h-[inherit] w-full flex-col justify-start gap-8 self-start">
             <NavHeader title="Add Money" onPrev={handleBack} />
 
             <div className="my-auto flex h-full w-full flex-col justify-center space-y-4 pb-5">

src/components/AddMoney/views/CryptoDepositQR.view.tsx

@@ -25,38 +25,40 @@ export const CryptoDepositQR = ({ tokenName, chainName, depositAddress, onBack }
     }, [depositAddress])
 
     return (
-        <div className="flex h-full w-full flex-col justify-start gap-6 self-start pb-5 md:pb-0">
+        <div className="flex min-h-[inherit] w-full flex-col justify-start space-y-8 pb-5 md:pb-0">
             <NavHeader title={'Add Money'} onPrev={onBack} />
 
-            <Card position="single" className="p-4">
-                <div className="flex items-center gap-3">
-                    <AvatarWithBadge size="extra-small" className="bg-yellow-400" icon="wallet-outline" />
+            <div className="my-auto flex flex-grow flex-col justify-center gap-4 md:my-0">
+                <Card position="single" className="p-4">
+                    <div className="flex items-center gap-3">
+                        <AvatarWithBadge size="extra-small" className="bg-yellow-400" icon="wallet-outline" />
 
-                    <div className="flex flex-col">
-                        <h3 className="font-semibold">{`Deposit ${tokenName} on ${chainName}`}</h3>
-                        <p className="text-xs text-grey-1">Other tokens or networks will be lost</p>
+                        <div className="flex flex-col">
+                            <h3 className="font-semibold">{`Deposit ${tokenName} on ${chainName}`}</h3>
+                            <p className="text-xs text-grey-1">Other tokens or networks will be lost</p>
+                        </div>
                     </div>
-                </div>
-            </Card>
+                </Card>
 
-            <div className="flex items-center justify-center">
-                <QRCodeWrapper url={depositAddress} />
-            </div>
+                <div className="flex items-center justify-center">
+                    <QRCodeWrapper url={depositAddress} />
+                </div>
 
-            <div className="flex flex-col gap-2">
-                <label htmlFor="deposit-address" className="text-sm font-bold text-black">
-                    Your deposit address
-                </label>
-                <Card className="px-4 py-3 text-xs text-grey-1">{depositAddress}</Card>
-                <Button
-                    variant="purple"
-                    onClick={handleCopyAddress}
-                    className="w-full"
-                    icon={copied ? 'check' : 'copy'}
-                    shadowSize="4"
-                >
-                    {copied ? 'Copied!' : 'Copy'}
-                </Button>
+                <div className="flex flex-col gap-2">
+                    <label htmlFor="deposit-address" className="text-sm font-bold text-black">
+                        Your deposit address
+                    </label>
+                    <Card className="px-4 py-3 text-xs text-grey-1">{depositAddress}</Card>
+                    <Button
+                        variant="purple"
+                        onClick={handleCopyAddress}
+                        className="w-full"
+                        icon={copied ? 'check' : 'copy'}
+                        shadowSize="4"
+                    >
+                        {copied ? 'Copied!' : 'Copy'}
+                    </Button>
+                </div>
             </div>
         </div>
     )

src/components/AddWithdraw/AddWithdrawCountriesList.tsx

@@ -203,7 +203,7 @@ const AddWithdrawCountriesList = ({ flow }: AddWithdrawCountriesListProps) => {
 
     if (view === 'form') {
         return (
-            <div className="w-full space-y-8 self-start">
+            <div className="min-h-[inherit] w-full space-y-8 self-start">
                 <NavHeader title={'Withdraw'} onPrev={() => setView('list')} />
                 <DynamicBankAccountForm
                     ref={formRef}

src/components/AddWithdraw/DynamicBankAccountForm.tsx

@@ -177,7 +177,7 @@ export const DynamicBankAccountForm = forwardRef<{ handleSubmit: () => void }, D
         }, [country])
 
         return (
-            <div className="my-auto flex h-full w-full flex-col justify-center space-y-4 pb-5">
+            <div className="my-auto flex h-full min-h-[inherit] w-full flex-col justify-center space-y-4 pb-5">
                 <PeanutActionDetailsCard
                     countryCodeForFlag={countryCodeForFlag.toLowerCase()}
                     avatarSize="small"

src/components/Request/link/views/Create.request.link.view.tsx

@@ -377,9 +377,9 @@ export const CreateRequestLinkView = () => {
         (hasAttachment && _tokenValue !== debouncedTokenValue)
 
     return (
-        <div className="w-full space-y-8">
+        <div className="flex min-h-[inherit] w-full flex-col justify-start space-y-8">
             <NavHeader onPrev={() => router.push('/request')} title="Request" />
-            <div className="w-full space-y-4">
+            <div className="my-auto flex flex-grow flex-col justify-center gap-4 md:my-0">
                 <PeanutActionCard type="request" />
 
                 <QRCodeWrapper url={qrCodeLink} isLoading={!!((hasAttachment && isCreatingLink) || isDebouncing)} />

src/components/Send/link/LinkSendFlowManager.tsx

@@ -52,15 +52,17 @@ const LinkSendFlowManager = ({ onPrev }: LinkSendFlowManagerProps) => {
     }, [dispatch])
 
     return (
-        <div>
+        <>
             {view === 'INITIAL' && (
-                <div className="space-y-8">
+                <div className="flex min-h-[inherit] w-full flex-col justify-start space-y-8">
                     <NavHeader onPrev={onPrev} title="Send" />
-                    <LinkSendInitialView />
+                    <div className="my-auto flex flex-grow flex-col justify-center gap-4 md:my-0">
+                        <LinkSendInitialView />
+                    </div>
                 </div>
             )}
             {view === 'SUCCESS' && <LinkSendSuccessView />}
-        </div>
+        </>
     )
 }
 

src/components/Send/link/views/Success.link.send.view.tsx

@@ -25,9 +25,12 @@ const LinkSendSuccessView = () => {
     const { user } = useUserStore()
     const [isLoading, setIsLoading] = useState<boolean>(false)
 
+    if (isLoading) {
+        return <PeanutLoading coverFullScreen />
+    }
+
     return (
-        <div className="relative space-y-8">
-            {isLoading && <PeanutLoading coverFullScreen />}
+        <div className="flex min-h-[inherit] w-full flex-col justify-start space-y-8">
             <NavHeader
                 icon="cancel"
                 title="Send"
@@ -36,7 +39,7 @@ const LinkSendSuccessView = () => {
                     dispatch(sendFlowActions.resetSendFlow())
                 }}
             />
-            <div className="flex flex-col gap-6">
+            <div className="my-auto flex flex-grow flex-col justify-center gap-4 md:my-0">
                 {link && (
                     <SuccessViewDetailsCard
                         title="Link created!"