From 23e626777a7d2a1d5dfcb59763d6edb3fb10ee2b Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Tue, 10 Sep 2024 14:20:04 +0530
Subject: [PATCH] fix: settings page scrollbar

---
 .../projects/(detail)/[projectId]/settings/layout.tsx | 11 ++++++-----
 .../[workspaceSlug]/(projects)/settings/layout.tsx    | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
index 96d0d33e217..9cacd73e7b5 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
@@ -2,7 +2,6 @@
 
 import { FC, ReactNode } from "react";
 // components
-import { ContentWrapper } from "@plane/ui";
 import { AppHeader } from "@/components/core";
 // local components
 import { ProjectSettingHeader } from "./header";
@@ -17,14 +16,16 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
   return (
     <>
       <AppHeader header={<ProjectSettingHeader />} />
-      <ContentWrapper className="flex-row inset-y-0 gap-4">
-        <div className="w-80 flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+      <div className="inset-y-0 flex flex-row vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto">
+        <div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
           <ProjectSettingsSidebar />
         </div>
         <div className="flex flex-col relative w-full overflow-hidden">
-          <div className="w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">{children}</div>
+          <div className="w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-page-x md:px-9 py-page-y">
+            {children}
+          </div>
         </div>
-      </ContentWrapper>
+      </div>
     </>
   );
 };
diff --git a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
index 21ab3d39c2e..79acb3ef9b4 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
@@ -2,7 +2,6 @@
 
 import { ReactNode } from "react";
 // components
-import { ContentWrapper } from "@plane/ui";
 import { AppHeader } from "@/components/core";
 // local components
 import { WorkspaceSettingHeader } from "./header";
@@ -20,14 +19,16 @@ export default function WorkspaceSettingLayout(props: IWorkspaceSettingLayout) {
     <>
       <AppHeader header={<WorkspaceSettingHeader />} />
       <MobileWorkspaceSettingsTabs />
-      <ContentWrapper className="flex-row inset-y-0 gap-4">
-        <div className="w-80 flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+      <div className="inset-y-0 flex flex-row vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto">
+        <div className="px-page-x !pr-0 py-page-y flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
           <WorkspaceSettingsSidebar />
         </div>
         <div className="flex flex-col relative w-full overflow-hidden">
-          <div className="w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">{children}</div>
+          <div className="w-full  h-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-page-x md:px-9 py-page-y">
+            {children}
+          </div>
         </div>
-      </ContentWrapper>
+      </div>
     </>
   );
 }