feat: flex layout on Row/Col

src/pages/details.tsx

@@ -132,8 +132,8 @@ export default function DetailsPage() {
     return (
         <>
             <Row justify="center" align="top" gutter={[16, 16]}>
-                <Col span={18}>{body}</Col>
+                <Col flex={6}>{body}</Col>
-                <Col span={6}>{details && <ProblemDetails details={details} />}</Col>
+                <Col flex={1}>{details && <ProblemDetails details={details} />}</Col>
             </Row>
         </>
     );

src/pages/problem.tsx

@@ -32,8 +32,8 @@ export default function ProblemPage() {
     return (
         <>
             <Row justify="center" align="top" gutter={[16, 16]}>
-                <Col span={18}>{ProblemStatement}</Col>
+                <Col flex={5}>{ProblemStatement}</Col>
-                <Col span={6}>{MiscPanel}</Col>
+                <Col flex={1}>{MiscPanel}</Col>
             </Row>
         </>
     );

src/pages/profile.tsx

@@ -13,10 +13,10 @@ export default function ProfilePage() {
     return (
         <>
             <Row justify="center" align="top" gutter={[16, 16]}>
-                <Col span={18}>
+                <Col flex={6}>
                     <StatusTable uid={id_num} token={auth.token} />
                 </Col>
-                <Col span={6}>
+                <Col flex={1}>
                     <UserInfo uid={id_num} token={auth.token} />
                 </Col>
             </Row>

src/pages/status.tsx

@@ -13,11 +13,11 @@ export default function ProblemStatusPage() {
     return (
         <>
             <Row justify="center" align="top" gutter={[16, 16]}>
-                <Col span={18}>
+                <Col flex={6}>
                     {" "}
                     <StatusTable pid={+(id || "0")} token={auth.token} />
                 </Col>
-                <Col span={6}>
+                <Col flex={1}>
                     <ProblemDetails details={details} />
                 </Col>
             </Row>

src/pages/submit.tsx

@@ -74,8 +74,8 @@ export default function SubmitPage() {
         <>
             {msgContextHolder}
             <Row justify="center" align="top" gutter={[16, 16]}>
-                <Col span={18}>{codeEditor}</Col>
+                <Col flex={6}>{codeEditor}</Col>
-                <Col span={6}>{MiscPanel}</Col>
+                <Col flex={1}>{MiscPanel}</Col>
             </Row>
         </>
     );