sidebar

frontend/app/projects/page.tsx

@@ -145,7 +145,7 @@ export default function ProjectsPage() {
   };
 
   return (
-    <div>
+    <div className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
       <div className="flex h-full items-center">
         <h1 className={title()}>Projects</h1>
         <Button color="primary" onClick={openModal} className="ms-5 mt-3">
@@ -153,6 +153,16 @@ export default function ProjectsPage() {
         </Button>
       </div>
 
+      <div className="flex flex-wrap items-stretch gap-4 mt-5">
+        {projects.map((project, index) => (
+          <ProjectCard
+            key={index}
+            projectName={project.name}
+            projectDetail={project.detail}
+          />
+        ))}
+      </div>
+
       <Modal isOpen={isCreateDialogOpen}>
         <ModalContent>
           <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
@@ -193,16 +203,6 @@ export default function ProjectsPage() {
           </ModalFooter>
         </ModalContent>
       </Modal>
-
-      <div className="flex flex-wrap gap-4 mt-5">
-        {projects.map((project, index) => (
-          <ProjectCard
-            key={index}
-            projectName={project.name}
-            projectDetail={project.detail}
-          />
-        ))}
-      </div>
     </div>
   );
 }