From c575f171ea3f204ffadd93d5240a7c4f4dd7050e Mon Sep 17 00:00:00 2001
From: Sam Bao <sam.b5687@gmail.com>
Date: Mon, 11 Nov 2024 13:50:01 -0700
Subject: [PATCH] tweaking UI for different screen size

---
 src/App.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index debe2ee..993f964 100644
--- a/src/App.js
+++ b/src/App.js
@@ -50,7 +50,7 @@ function App() {
               container
               spacing={3}              
             >
-              <Grid item xs={11} md={2} sx={{ minHeight: { xs: '50vh', sm: '50vh', md: '100vh' }}}>
+              <Grid item xs={11} sm={11} md={4} lg={3} xl={3} sx={{ minHeight: { xs: '50vh', sm: '50vh', md: '100vh' }}}>
                 <TaleSetup setStartDate={setStartDate}
                   setEndDate={setEndDate}
                   setArtistList={setArtistList}
@@ -75,7 +75,7 @@ function App() {
                   openDialog={openDialog}
                   isRequestTriggered={isRequestTriggered} />
               </Grid>
-              <Grid item xs={11} md={7} sx={{ marginTop: 3}}>
+              <Grid item xs={11} sm={11} md={7} lg={7} xl={7} sx={{ marginTop: 3}}>
                 <Odyssey
                   setPosterName={setPosterName}
                   setShareId={setShareId}