From 6c9340851897c47a2e87fcc440c3c9cf654d85c8 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Tue, 3 May 2022 16:28:00 -0400
Subject: [PATCH] Improve donate box UI in mid-size window

---
 web/components/page.tsx             | 2 +-
 web/pages/charity/[charitySlug].tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/page.tsx b/web/components/page.tsx
index 6ee84875..90aa41df 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -32,7 +32,7 @@ export function Page(props: {
           {children}
 
           {/* If right sidebar is hidden, place its content at the bottom of the page. */}
-          <div className="block xl:hidden">{rightSidebar}</div>
+          <div className="mt-4 block xl:hidden">{rightSidebar}</div>
         </main>
         <aside className="hidden xl:col-span-3 xl:block">
           <div className="sticky top-4 space-y-4">{rightSidebar}</div>
diff --git a/web/pages/charity/[charitySlug].tsx b/web/pages/charity/[charitySlug].tsx
index c53cbb7e..6869ede8 100644
--- a/web/pages/charity/[charitySlug].tsx
+++ b/web/pages/charity/[charitySlug].tsx
@@ -215,8 +215,8 @@ function DonationBox(props: {
         />
 
         <Col className="mt-3 w-full gap-3">
-          <Row className="items-center justify-between text-sm">
-            <span className="text-gray-500">{charity.name} receives</span>
+          <Row className="items-center text-sm xl:justify-between">
+            <span className="mr-1 text-gray-500">{charity.name} receives</span>
             <span>{manaToUSD(amount || 0)}</span>
           </Row>
           {/* TODO: matching pool */}