some styilization fixes

asuc-octo · Dec 7, 2024 · 9d0df5f · 9d0df5f
1 parent 97f833d
commit 9d0df5f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 29 deletions.
diff --git a/src/app/SemesterHome/SemesterHome.css b/src/app/SemesterHome/SemesterHome.css
@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;  
     height: 100vh;
-    width: 100vh;
+    width: 100vw;
     padding-top: var(--S, 16px);
     background: var(--White, #FFF); 
     position: relative; 
@@ -17,14 +17,17 @@
 .content {
     display: flex;
     flex: 1;
+    flex-direction: column;
     padding: 16px;
-    overflow: auto;
+    overflow: hidden;
     box-sizing: border-box;
 }
 
 .semester-layout {
-    margin-left: 32px;
-    margin-right: 32px;
+    direction: row;
+    margin: 32px;
+    gap: 12px;
+
 }
 
 .semester-title {
@@ -37,5 +40,7 @@
     line-height: 36px; /* 128.571% */
     letter-spacing: -0.28px;
     text-align: left;
+    margin-top: 32px;
     margin-left: 32px;
+    position: sticky;
 }
diff --git a/src/app/SemesterHome/SemesterHome.tsx b/src/app/SemesterHome/SemesterHome.tsx
@@ -11,7 +11,7 @@ function SemesterHome() {
   // Pretend this is the queried data
   // TODO: Request for minors to be added to backend
   const user = {
-    "name": "Khankamol Chor Kongrukgreatiyos",
+    "name": "Yuna Kim",
     "majors": ["Computer Science BA", "Data Science"],
     "minors": []
   }
@@ -28,32 +28,32 @@ function SemesterHome() {
     <>
       <Flex direction="row" height="100vh">
         {/* Side panel */}
-          <SidePanel 
-            name={user.name} 
-            majors={user.majors} 
-            minors={user.minors}
-            totalUnits={140}
-            transferUnits={40}
-            pnpTotal={15}
-          />
+        <SidePanel 
+          name={user.name} 
+          majors={user.majors} 
+          minors={user.minors}
+          totalUnits={140}
+          transferUnits={40}
+          pnpTotal={15}
+        />
 
         {/* Page body */}
-          <Flex direction="column" gap="32px">
-            <h3 className='semester-title'>Semesters</h3>
-            <Flex direction="row" gap="12px" className='semester-layout'>
-              <SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""}></SemesterBlock>
-                {years.map((year) => (
-                    <Flex key={year} className="year-element" direction="row" gap="12px">
-                      {/* Replace with the element you want to render */}
-                      <SemesterBlock selectedSemester={"Fall"} selectedYear={year}></SemesterBlock>
-                      <SemesterBlock selectedSemester={"Spring"} selectedYear={year}></SemesterBlock>
-                      {summerCheck &&
-                        <SemesterBlock selectedSemester={"Summer"} selectedYear={year}></SemesterBlock>
-                      }
-                    </Flex>
-                  ))}
-            </Flex>
+        <Flex direction="column">
+          <h3 className='semester-title'>Semesters</h3>
+          <Flex className='semester-layout'>
+            <SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""}></SemesterBlock>
+              {years.map((year) => (
+                  <Flex key={year} className="year-element" direction="row" gap="12px">
+                    {/* Replace with the element you want to render */}
+                    <SemesterBlock selectedSemester={"Fall"} selectedYear={year}></SemesterBlock>
+                    <SemesterBlock selectedSemester={"Spring"} selectedYear={year}></SemesterBlock>
+                    {summerCheck &&
+                      <SemesterBlock selectedSemester={"Summer"} selectedYear={year}></SemesterBlock>
+                    }
+                  </Flex>
+                ))}
           </Flex>
+        </Flex>
       </Flex>
     </>
   );

diff --git a/src/components/SidePanel/SidePanel.css b/src/components/SidePanel/SidePanel.css
@@ -86,7 +86,7 @@ button.primary:hover {
 }
 
 button.secondary {
-    display: flex;
+    width: 50px;
     padding: var(--XXS, 6px) var(--XS, 12px);
     justify-content: center;
     align-items: center;