[WEB-4236] fix: divided settings scroll for sidebar and main content (#7201)

* fix: divided settings scroll for sidebar and main content

* fix: handled icons

* fix: mobile css

web/app/(all)/[workspaceSlug]/(settings)/layout.tsx

@@ -2,7 +2,7 @@
 
 import { CommandPalette } from "@/components/command-palette";
 import { ContentWrapper } from "@/components/core";
-import { SettingsContentLayout, SettingsHeader } from "@/components/settings";
+import { SettingsHeader } from "@/components/settings";
 import { AuthenticationWrapper } from "@/lib/wrappers";
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 
@@ -15,8 +15,8 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
           {/* Header */}
           <SettingsHeader />
           {/* Content */}
-          <ContentWrapper className="px-4 md:pl-12 md:pt-page-y md:flex w-full">
-            <SettingsContentLayout>{children}</SettingsContentLayout>
+          <ContentWrapper className="px-4 md:pl-12 md:flex w-full">
+            <div className="w-full h-full overflow-hidden">{children}</div>
           </ContentWrapper>
         </main>
       </WorkspaceAuthWrapper>

web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

@@ -39,13 +39,13 @@ const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = observer((props) =>
         hamburgerContent={WorkspaceSettingsSidebar}
         activePath={getWorkspaceActivePath(pathname) || ""}
       />
-      <div className="inset-y-0 flex flex-row w-full">
+      <div className="inset-y-0 flex flex-row w-full h-full">
         {workspaceUserInfo && !isAuthorized ? (
           <NotAuthorizedView section="settings" className="h-auto" />
         ) : (
           <div className="relative flex h-full w-full">
             <div className="hidden md:block">{<WorkspaceSettingsSidebar />}</div>
-            {children}
+            <div className="w-full h-full overflow-y-scroll md:pt-page-y">{children}</div>
           </div>
         )}
       </div>

web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx

@@ -24,7 +24,9 @@ const ProfileSettingsLayout = observer((props: Props) => {
         <div className="hidden md:block">
           <ProfileSidebar />
         </div>
-        <SettingsContentWrapper>{children}</SettingsContentWrapper>
+        <div className="w-full h-full overflow-y-scroll md:pt-page-y">
+          <SettingsContentWrapper>{children}</SettingsContentWrapper>
+        </div>
       </div>
     </>
   );

web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx

@@ -36,7 +36,7 @@ const ProjectSettingsLayout = observer((props: Props) => {
       <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
         <div className="relative flex h-full w-full">
           <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
-          {children}
+          <div className="w-full h-full overflow-y-scroll md:pt-page-y">{children}</div>
         </div>
       </ProjectAuthWrapper>
     </>

web/app/(all)/profile/sidebar.tsx

@@ -47,17 +47,19 @@ const WORKSPACE_ACTION_LINKS = [
   },
 ];
 
-export const ProjectActionIcons = ({ type, size, className }: { type: string; size?: number; className?: string }) => {
+const ProjectActionIcons = ({ type, size, className = "" }: { type: string; size?: number; className?: string }) => {
   const icons = {
     profile: CircleUser,
     security: KeyRound,
     activity: Activity,
-    appearance: Settings2,
+    preferences: Settings2,
     notifications: Bell,
+    "api-tokens": KeyRound,
   };
 
   if (type === undefined) return null;
   const Icon = icons[type as keyof typeof icons];
+  if (!Icon) return null;
   return <Icon size={size} className={className} />;
 };
 export const ProfileLayoutSidebar = observer(() => {

web/core/components/settings/content-wrapper.tsx

@@ -12,7 +12,7 @@ export const SettingsContentWrapper = observer((props: TProps) => {
   return (
     <div
       className={cn("flex flex-col w-full items-center mx-auto py-4 md:py-0", {
-        "p-4 max-w-[800px] 2xl:max-w-[1000px]": size === "md",
+        "md:p-4 max-w-[800px] 2xl:max-w-[1000px]": size === "md",
         "md:px-16": size === "lg",
       })}
     >

web/core/components/settings/sidebar/root.tsx

@@ -37,7 +37,7 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
 
   return (
     <div
-      className={cn("flex w-[250px] flex-col gap-2 flex-shrink-0 pb-5", {
+      className={cn("flex w-[250px] flex-col gap-2 flex-shrink-0 overflow-y-scroll h-full md:pt-page-y ", {
         "absolute left-0 top-[42px] z-50 h-fit max-h-[400px] overflow-scroll bg-custom-background-100 border border-custom-border-100 rounded shadow-sm p-4":
           isMobile,
       })}
@@ -45,9 +45,9 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
       {/* Header */}
       <SettingsSidebarHeader customHeader={customHeader} />
       {/* Navigation */}
-      <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full">
+      <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll">
         {categories.map((category) => (
-          <div key={category} className="py-3 h-full">
+          <div key={category} className="py-3">
             <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2">{t(category)}</span>
             {groupedSettings[category].length > 0 && (
               <div className="relative flex flex-col gap-0.5 h-full mt-2">