Apply mobile-responsive

Bibimbap-Team · Aug 10, 2024 · 055b78b · 055b78b
1 parent b221d78
commit 055b78b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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>