feat: ui improvements for smaller screens

components/Header.tsx

@@ -57,7 +57,7 @@ const Header = () => {
           {fundSlug === 'privacyguides' && <PrivacyGuidesLogo className="w-12 h-12" />}
           {fundSlug === 'general' && <MagicLogo className="w-12 h-12" />}
 
-          <span className="text-foreground text-lg font-bold">
+          <span className="text-foreground text-lg font-bold hidden sm:block">
             {fund ? fund.title : 'MAGIC Grants'}
           </span>
         </Link>
@@ -82,10 +82,15 @@ const Header = () => {
         {!!fund && session.status !== 'authenticated' && (
           <>
             <Dialog open={loginIsOpen} onOpenChange={setLoginIsOpen}>
-              <DialogTrigger asChild>
-                <Button variant="outline" className="w-24">
-                  Login
-                </Button>
+              <DialogTrigger>
+                <>
+                  <Button variant="outline" className="w-18 block sm:hidden" size="sm">
+                    Login
+                  </Button>
+                  <Button variant="outline" className="w-24 hidden sm:block">
+                    Login
+                  </Button>
+                </>
               </DialogTrigger>
               <DialogContent>
                 <LoginFormModal
@@ -97,8 +102,13 @@ const Header = () => {
             </Dialog>
 
             <Dialog open={registerIsOpen} onOpenChange={setRegisterIsOpen}>
-              <DialogTrigger asChild>
-                <Button className="w-24">Register</Button>
+              <DialogTrigger>
+                <>
+                  <Button className="w-18 block sm:hidden" size="sm">
+                    Register
+                  </Button>
+                  <Button className="w-24 hidden sm:block">Register</Button>
+                </>
               </DialogTrigger>
               <DialogContent>
                 <RegisterFormModal
@@ -140,7 +150,7 @@ const Header = () => {
           </DropdownMenu>
         )}
 
-        <MobileNav />
+        {!!fundSlug && <MobileNav />}
       </div>
 
       <Dialog open={passwordResetIsOpen} onOpenChange={setPasswordResetIsOpen}>

components/ui/dialog.tsx

@@ -33,7 +33,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full sm:max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'max-h-dvh fixed left-[50%] top-[50%] z-50 grid w-full overflow-auto sm:max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}

pages/[fund]/account/my-donations.tsx

@@ -34,29 +34,31 @@ function MyDonations() {
         <title>Monero Fund - My Donations</title>
       </Head>
 
-      <div className="w-full max-w-5xl mx-auto flex flex-col">
+      <div className="w-full max-w-5xl h-full mx-auto flex flex-col">
         <h1 className="text-3xl font-bold mb-4">My Donations</h1>
 
-        <Table className="">
-          <TableHeader>
-            <TableRow>
-              <TableHead>Project</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead>Amount</TableHead>
-              <TableHead>Date</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {donationListQuery.data?.map((donation) => (
-              <TableRow key={donation.createdAt.toISOString()}>
-                <TableCell>{donation.projectName}</TableCell>
-                <TableCell>{donation.btcPayInvoiceId ? 'Crypto' : 'Fiat'}</TableCell>
-                <TableCell>${donation.grossFiatAmount}</TableCell>
-                <TableCell>{dayjs(donation.createdAt).format('lll')}</TableCell>
+        <div className="w-full flex overflow-x-auto grow">
+          <Table className="min-w-[700px] grow">
+            <TableHeader>
+              <TableRow>
+                <TableHead>Project</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead>Amount</TableHead>
+                <TableHead>Date</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {donationListQuery.data?.map((donation) => (
+                <TableRow key={donation.createdAt.toISOString()}>
+                  <TableCell>{donation.projectName}</TableCell>
+                  <TableCell>{donation.btcPayInvoiceId ? 'Crypto' : 'Fiat'}</TableCell>
+                  <TableCell>${donation.grossFiatAmount}</TableCell>
+                  <TableCell>{dayjs(donation.createdAt).format('lll')}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       </div>
     </>
   )

pages/[fund]/account/my-memberships.tsx

@@ -30,7 +30,7 @@ function MyMemberships() {
         <title>Monero Fund - My Memberships</title>
       </Head>
 
-      <div className="w-full max-w-5xl mx-auto flex flex-col">
+      <div className="w-full max-w-5xl h-full mx-auto flex flex-col">
         <div className="flex flex-row justify-between">
           <h1 className="text-3xl font-bold mb-4">My Memberships</h1>
           {membershipListQuery.data?.billingPortalUrl && (
@@ -43,28 +43,30 @@ function MyMemberships() {
           )}
         </div>
 
-        <Table className="">
-          <TableHeader>
-            <TableRow>
-              <TableHead>Project</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead>Recurring</TableHead>
-              <TableHead>Date</TableHead>
-              <TableHead>Period End</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {membershipListQuery.data?.memberships.map((membership) => (
-              <TableRow key={membership.createdAt.toISOString()}>
-                <TableCell>{membership.projectName}</TableCell>
-                <TableCell>{membership.btcPayInvoiceId ? 'Crypto' : 'Fiat'}</TableCell>
-                <TableCell>{membership.stripeSubscriptionId ? 'Yes' : 'No'}</TableCell>
-                <TableCell>{dayjs(membership.createdAt).format('lll')}</TableCell>
-                <TableCell>{dayjs(membership.membershipExpiresAt).format('lll')}</TableCell>
+        <div className="w-full flex overflow-x-auto grow">
+          <Table className="min-w-[700px] grow">
+            <TableHeader>
+              <TableRow>
+                <TableHead>Project</TableHead>
+                <TableHead>Method</TableHead>
+                <TableHead>Recurring</TableHead>
+                <TableHead>Date</TableHead>
+                <TableHead>Period End</TableHead>
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+            </TableHeader>
+            <TableBody>
+              {membershipListQuery.data?.memberships.map((membership) => (
+                <TableRow key={membership.createdAt.toISOString()}>
+                  <TableCell>{membership.projectName}</TableCell>
+                  <TableCell>{membership.btcPayInvoiceId ? 'Crypto' : 'Fiat'}</TableCell>
+                  <TableCell>{membership.stripeSubscriptionId ? 'Yes' : 'No'}</TableCell>
+                  <TableCell>{dayjs(membership.createdAt).format('lll')}</TableCell>
+                  <TableCell>{dayjs(membership.membershipExpiresAt).format('lll')}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
       </div>
     </>
   )