fix: ui issue with scroll on a create plan page (#81)

* fix: ui fix patch * fix: lint fix
Solvro · Nov 18, 2024 · 1b07b98 · 1b07b98
1 parent 546972d
commit 1b07b98
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 27 deletions.
diff --git a/frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx b/frontend/src/app/plans/create/[id]/_components/CreateNewPlanPage.tsx
@@ -102,8 +102,8 @@ export function CreateNewPlanPage({ planId }: { planId: string }) {
       }) ?? [];
 
   return (
-    <div className="flex w-full flex-1 flex-col items-center justify-center gap-2 py-3 md:flex-row md:items-start">
-      <div className="flex w-full max-w-[350px] flex-col items-center justify-center gap-2 px-2 md:ml-4 md:w-4/12 md:flex-col">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 py-3 md:flex-row md:items-start">
+      <div className="flex h-full w-full max-w-[350px] flex-col items-center justify-center gap-2 px-2 md:ml-4 md:w-4/12 md:flex-col">
         <div className="flex flex-col justify-start gap-3 md:w-full">
           <div className="flex w-full items-end gap-2">
             <div className="flex items-end gap-2">
@@ -206,29 +206,27 @@ export function CreateNewPlanPage({ planId }: { planId: string }) {
           </div>
         ) : null}
 
-        <div className="w-full items-center justify-center">
-          <div className="w-full overflow-auto">
-            <Accordion type="single" collapsible={true}>
-              {plan.registrations.map((registration) => (
-                <GroupsAccordionItem
-                  key={registration.id}
-                  registrationName={registration.name}
-                  onCourseCheck={(courseId) => {
-                    plan.selectCourse(courseId);
-                  }}
-                  onDelete={() => {
-                    plan.removeRegistration(registration.id);
-                  }}
-                  onCheckAll={(isChecked) => {
-                    plan.checkAllCourses(registration.id, isChecked);
-                  }}
-                  courses={plan.courses.filter(
-                    (c) => c.registrationId === registration.id,
-                  )}
-                />
-              ))}
-            </Accordion>
-          </div>
+        <div className="flex w-full flex-1 flex-col overflow-y-scroll">
+          <Accordion type="single" collapsible={true}>
+            {plan.registrations.map((registration) => (
+              <GroupsAccordionItem
+                key={registration.id}
+                registrationName={registration.name}
+                onCourseCheck={(courseId) => {
+                  plan.selectCourse(courseId);
+                }}
+                onDelete={() => {
+                  plan.removeRegistration(registration.id);
+                }}
+                onCheckAll={(isChecked) => {
+                  plan.checkAllCourses(registration.id, isChecked);
+                }}
+                courses={plan.courses.filter(
+                  (c) => c.registrationId === registration.id,
+                )}
+              />
+            ))}
+          </Accordion>
         </div>
       </div>
       <hr />

diff --git a/frontend/src/app/plans/layout.tsx b/frontend/src/app/plans/layout.tsx
@@ -12,13 +12,13 @@ export default function PlansLayout({
 }) {
   return (
     <div className="flex h-screen min-h-screen flex-col items-center overflow-x-hidden">
-      <div className="flex max-h-20 min-h-20 w-full items-center justify-between bg-mainbutton7">
+      <div className="flex w-full items-center justify-between bg-mainbutton7 py-4 shadow-sm">
         <div className="container mx-auto flex items-center justify-between">
           <div className="ml-4 flex items-center gap-2 text-2xl font-bold text-white md:w-1/4">
             <SolvroLogo />
             <div className="md:hidden">Kreator</div>
           </div>
-          <div className="hidden w-1/2 items-center justify-center font-bold text-white md:flex md:text-4xl">
+          <div className="hidden w-1/2 items-center justify-center font-bold text-white md:flex md:text-3xl">
             Kreator
           </div>
           <div className="mr-4 flex w-1/4 items-center justify-end">