From 055b78b62ae99402a167e612b673485377e3f059 Mon Sep 17 00:00:00 2001
From: kidw0124 <38641848+kidw0124@users.noreply.github.com>
Date: Sun, 11 Aug 2024 07:15:25 +0900
Subject: [PATCH] Apply mobile-responsive

---
 .../problems/[qid]/statements/EditStatement.tsx   | 12 ++++++++++--
 .../problems/[qid]/statements/StatementNavbar.tsx | 15 +++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/problems/[qid]/statements/EditStatement.tsx b/src/app/problems/[qid]/statements/EditStatement.tsx
index 02784a7..0beb4fd 100644
--- a/src/app/problems/[qid]/statements/EditStatement.tsx
+++ b/src/app/problems/[qid]/statements/EditStatement.tsx
@@ -22,11 +22,19 @@ export default function EditStatement({
     <Paper>
       <Stack direction='column' px={4} py={2} gap={2}>
         <Stack direction='column'>
-          <Stack direction='row' gap={2} px={2} justifyContent='space-between'>
+          <Stack
+            gap={2}
+            px={2}
+            justifyContent='space-between'
+            sx={{
+              xs: { flexDirection: 'column' },
+              md: { flexDirection: 'row' },
+            }}
+          >
             <Typography variant='h6'>
               Edit {languageName}({language}) Statement
             </Typography>
-            <ButtonGroup variant='text'>
+            <ButtonGroup variant='text' sx={{ justifyContent: 'flex-end' }}>
               <Button>In LaTex</Button>
               <Button>In HTML</Button>
               <Button>In PDF</Button>
diff --git a/src/app/problems/[qid]/statements/StatementNavbar.tsx b/src/app/problems/[qid]/statements/StatementNavbar.tsx
index 50d3d7c..2488aab 100644
--- a/src/app/problems/[qid]/statements/StatementNavbar.tsx
+++ b/src/app/problems/[qid]/statements/StatementNavbar.tsx
@@ -10,7 +10,15 @@ export default function StatementNavbar({
   return (
     <Box sx={{ width: '100%' }}>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Stack direction='row' gap={2} p={2} justifyContent='space-between'>
+        <Stack
+          gap={2}
+          p={2}
+          justifyContent='space-between'
+          sx={{
+            xs: { flexDirection: 'column' },
+            md: { flexDirection: 'row' },
+          }}
+        >
           <Tabs value={language}>
             {existedLanguageList.map((lang) => (
               <Tab
@@ -21,7 +29,10 @@ export default function StatementNavbar({
               />
             ))}
           </Tabs>
-          <ButtonGroup variant='text'>
+          <ButtonGroup
+            variant='text'
+            sx={{ flexWrap: 'wrap', justifyContent: 'flex-end' }}
+          >
             <Button>Edit With Preview</Button>
             <Button>Review</Button>
             <Button>Delete Current</Button>