diff --git a/src/app/SemesterHome/SemesterHome.css b/src/app/SemesterHome/SemesterHome.css index cc136a2..fd213b5 100644 --- 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 index 844165b..f2f1ff3 100644 --- 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() { <> {/* Side panel */} - + {/* Page body */} - -

Semesters

- - - {years.map((year) => ( - - {/* Replace with the element you want to render */} - - - {summerCheck && - - } - - ))} - + +

Semesters

+ + + {years.map((year) => ( + + {/* Replace with the element you want to render */} + + + {summerCheck && + + } + + ))} +
); diff --git a/src/components/SidePanel/SidePanel.css b/src/components/SidePanel/SidePanel.css index 29664b5..bcb9e8d 100644 --- 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;