Ammend styling issues with question page

Author: bensohh

apps/frontend/src/app/question/[id]/page.tsx

@@ -227,36 +227,36 @@ export default function QuestionPage() {
                 visibleTestcases={visibleTestCases}
               />
             </Col>
-            <Col span={12} className="second-col" style={{ height: "100%" }}>
+            <Col span={12} className="second-col">
               <Row className="history-row">
                 <div className="history-container">
                   <div className="history-top-container">
                     <div className="history-title">
                       <HistoryOutlined className="title-icons" />
                       Submission History
                     </div>
-                  </div>
-                  <div style={{ margin: "10px" }}>
-                    <Table
-                      rowKey="id"
-                      dataSource={userQuestionHistories}
-                      columns={columns}
-                      onRow={(record: any) => {
-                        return {
-                          onClick: () => handleRowClick(record),
-                          style: { cursor: "pointer" },
-                        };
-                      }}
-                      loading={isHistoryLoading}
-                      pagination={{
-                        size: "small",
-                        current: paginationParams.currentPage,
-                        total: paginationParams.totalCount,
-                        pageSize: paginationParams.limit,
-                        onChange: onPageJump,
-                      }}
-                      scroll={{ y: 200 }}
-                    />
+                    <div style={{ margin: "10px" }}>
+                      <Table
+                        rowKey="id"
+                        dataSource={userQuestionHistories}
+                        columns={columns}
+                        onRow={(record: any) => {
+                          return {
+                            onClick: () => handleRowClick(record),
+                            style: { cursor: "pointer" },
+                          };
+                        }}
+                        loading={isHistoryLoading}
+                        pagination={{
+                          size: "small",
+                          current: paginationParams.currentPage,
+                          total: paginationParams.totalCount,
+                          pageSize: paginationParams.limit,
+                          onChange: onPageJump,
+                        }}
+                        scroll={{ y: 200 }}
+                      />
+                    </div>
                   </div>
                 </div>
               </Row>

apps/frontend/src/app/question/[id]/styles.scss

@@ -8,7 +8,7 @@
 .question-content {
   background: white;
   flex: 1;
-  overflow-y: auto;
+  // overflow-y: auto;
 }
 
 .first-col,
@@ -21,21 +21,20 @@
 }
 
 .history-row {
-  padding: 1rem 0.25rem 0.25rem;
+  padding: 0.5rem 0.25rem 0.25rem;
+  height: 40%;
 }
 
 .code-row {
   flex: 1;
-  height: 100%;
-  padding: 1rem 0.25rem 0.25rem;
+  height: 60%;
+  padding: 0.5rem 0.25rem 0.25rem;
 }
 
-.test-top-container,
-.code-top-container,
-.history-top-container,
-.session-top-container {
+.test-top-container {
   display: flex;
   justify-content: space-between;
+  height: 50%;
 }
 
 .history-container,

apps/frontend/src/components/question/QuestionDetailFull/QuestionDetailFull.tsx

@@ -20,15 +20,15 @@ interface QuestionDetailFullProps {
 export const QuestionDetailFull = (props: QuestionDetailFullProps) => {
   return (
     <>
-      <Row className="question-row">
+      <Row className="question-box">
         <QuestionDetail
           questionTitle={props.questionTitle}
           complexity={props.complexity}
           categories={props.categories}
           description={props.description}
         />
       </Row>
-      <Row className="test-row">
+      <Row className="test-box">
         <TestcaseDetail
           visibleTestcases={props.visibleTestcases}
           shouldShowSubmitButton={props.shouldShowSubmitButton}

apps/frontend/src/components/question/QuestionDetailFull/styles.scss

@@ -1,9 +1,9 @@
-.question-row {
+.question-box {
   height: 50%;
-  padding: 1rem 0.25rem 0.25rem;
+  padding: 0.5rem 0.25rem 0.25rem;
 }
 
-.test-row {
+.test-box {
   height: 50%;
-  padding: 1rem 0.25rem 0.25rem;
+  padding: 0.5rem 0.25rem 0.25rem;
 }

apps/frontend/src/components/question/TestcaseDetail/TestcaseDetail.tsx

@@ -88,8 +88,8 @@ export const TestcaseDetail = (props: TestcaseDetailProps) => {
   );
 
   return (
-    <div className="test-container">
-      <div className="test-top-container">
+    <div className="test-section">
+      <div className="test-top-box">
         <div className="test-title">
           <FileDoneOutlined className="title-icons" />
           Test Cases

apps/frontend/src/components/question/TestcaseDetail/styles.scss

@@ -1,4 +1,4 @@
-.test-container {
+.test-section {
   border: 2px solid #463f3a;
   border-radius: 10px;
   width: 100%;
@@ -10,7 +10,7 @@
   font-weight: bold;
 }
 
-.test-top-container {
+.test-top-box {
   display: flex;
   justify-content: space-between;
 }