From b76279642707329969457c5df6fffccc5f901b26 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 14:05:40 +0300
Subject: [PATCH] fix: page-container in list-project-page

---
 .../pages/ListProjectPage/ListProjectPage.tsx | 122 +++++++++---------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index b3abf4c..0603de3 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -47,74 +47,76 @@ export default function ListProjectPage() {
                 <title>List a project</title>
                 <meta property="og:title" content='List a project' />
             </Helmet>
-            <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
-                {isMediumScreen ?
-                    <aside >
-                        <Card className="sticky-side-element">
-                            <p className="text-body2 font-bolder text-black mb-16">List a project</p>
-                            <ul className=' flex flex-col gap-8'>
-                                {links.map((link, idx) =>
-                                    <li key={idx}>
-                                        <button
-                                            //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
-                                            //  active:scale-95 transition-transform
-                                            // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
-                                            // `}
-                                            className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
+            <div className="page-container">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-24">
+                    {isMediumScreen ?
+                        <aside >
+                            <Card className="sticky-side-element">
+                                <p className="text-body2 font-bolder text-black mb-16">List a project</p>
+                                <ul className=' flex flex-col gap-8'>
+                                    {links.map((link, idx) =>
+                                        <li key={idx}>
+                                            <button
+                                                //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+                                                //  active:scale-95 transition-transform
+                                                // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                                // `}
+                                                className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
                                                         active:scale-95 transition-transform
                                                         ${link.path === curTab ? 'bg-gray-100' : 'hover:bg-gray-50'}
                                                         `}
-                                            onClick={() => setCurTab(link.path)}
-                                        >
-                                            {link.text}
-                                        </button>
-                                    </li>)}
-                            </ul>
-                        </Card>
-                    </aside>
-                    :
-                    <aside
-                        className=" bg-white z-10 w-full sticky-top-element"
-                    >
-                        <div className="relative group overflow-hidden">
-                            <div className="border-b-2 border-gray-200" ref={viewportRef}>
-                                <div className="select-none w-full flex gap-16">
-                                    {links.map((link, idx) =>
-                                        <button
-                                            key={idx}
-                                            className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
+                                                onClick={() => setCurTab(link.path)}
+                                            >
+                                                {link.text}
+                                            </button>
+                                        </li>)}
+                                </ul>
+                            </Card>
+                        </aside>
+                        :
+                        <aside
+                            className=" bg-white z-10 w-full sticky-top-element"
+                        >
+                            <div className="relative group overflow-hidden">
+                                <div className="border-b-2 border-gray-200" ref={viewportRef}>
+                                    <div className="select-none w-full flex gap-16">
+                                        {links.map((link, idx) =>
+                                            <button
+                                                key={idx}
+                                                className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
                                                 active:scale-95 transition-transform`}
-                                            style={{
-                                                ...(link.path === curTab && {
-                                                    borderBottom: '2px solid var(--primary)',
-                                                    marginBottom: -2
-                                                }),
-                                            }
-                                            }
+                                                style={{
+                                                    ...(link.path === curTab && {
+                                                        borderBottom: '2px solid var(--primary)',
+                                                        marginBottom: -2
+                                                    }),
+                                                }
+                                                }
 
-                                        >
-                                            {link.text}
-                                        </button>
-                                    )}
+                                            >
+                                                {link.text}
+                                            </button>
+                                        )}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </aside>
-                }
-                <main className="md:col-span-3">
-                    <FormContainer>
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-                            <div className="md:col-span-2">
-                                {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
-                                {curTab === tabs["team"].path && <TeamTab />}
-                                {curTab === tabs["extras"].path && <ExtrasTab />}
+                        </aside>
+                    }
+                    <main className="md:col-span-3">
+                        <FormContainer>
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+                                <div className="md:col-span-2">
+                                    {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
+                                    {curTab === tabs["team"].path && <TeamTab />}
+                                    {curTab === tabs["extras"].path && <ExtrasTab />}
+                                </div>
+                                <div className="self-start sticky-side-element">
+                                    <SaveChangesCard currentTab={curTab} />
+                                </div>
                             </div>
-                            <div className="self-start sticky-side-element">
-                                <SaveChangesCard currentTab={curTab} />
-                            </div>
-                        </div>
-                    </FormContainer>
-                </main>
+                        </FormContainer>
+                    </main>
+                </div>
             </div>
         </>
     )