From 8c9d328c24a124f08fad07353955be798f8de868 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 11 Mar 2024 21:09:41 +0530
Subject: [PATCH] chore: profile setting scroll fix and scrollbar added in
 activity section (#3929)

---
 web/layouts/settings-layout/profile/layout.tsx             | 2 +-
 web/layouts/settings-layout/profile/preferences/layout.tsx | 4 +---
 web/pages/profile/activity.tsx                             | 2 +-
 web/pages/profile/preferences/email.tsx                    | 2 +-
 web/pages/profile/preferences/theme.tsx                    | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/layouts/settings-layout/profile/layout.tsx b/web/layouts/settings-layout/profile/layout.tsx
index 67f545a2d..ef778cacb 100644
--- a/web/layouts/settings-layout/profile/layout.tsx
+++ b/web/layouts/settings-layout/profile/layout.tsx
@@ -21,7 +21,7 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             {header}
-            <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
+            <div className="h-full w-full overflow-hidden">{children}</div>
           </main>
         </div>
       </UserAuthWrapper>
diff --git a/web/layouts/settings-layout/profile/preferences/layout.tsx b/web/layouts/settings-layout/profile/preferences/layout.tsx
index 71a1fdd85..09cbd9649 100644
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@@ -73,9 +73,7 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
         <ProfilePreferenceSettingsSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           {header}
-          <div className="h-full w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
-            {children}
-          </div>
+          <div className="h-full w-full overflow-hidden">{children}</div>
         </main>
       </div>
     </ProfileSettingsLayout>
diff --git a/web/pages/profile/activity.tsx b/web/pages/profile/activity.tsx
index bda1295cf..17ad3292c 100644
--- a/web/pages/profile/activity.tsx
+++ b/web/pages/profile/activity.tsx
@@ -49,7 +49,7 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
           <SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
           <h3 className="text-xl font-medium">Activity</h3>
         </div>
-        <div className="h-full flex flex-col overflow-y-auto">
+        <div className="h-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-md">
           {activityPages}
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex items-center justify-center text-xs w-full">
diff --git a/web/pages/profile/preferences/email.tsx b/web/pages/profile/preferences/email.tsx
index b34a493e5..923ba70d9 100644
--- a/web/pages/profile/preferences/email.tsx
+++ b/web/pages/profile/preferences/email.tsx
@@ -28,7 +28,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = () => {
   return (
     <>
       <PageHead title="Profile - Email Preference" />
-      <div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8">
+      <div className="mx-auto mt-8 h-full w-full px-6 lg:px-20 pb-8 vertical-scrollbar scrollbar-md">
         <EmailNotificationForm data={data} />
       </div>
     </>
diff --git a/web/pages/profile/preferences/theme.tsx b/web/pages/profile/preferences/theme.tsx
index e23e94c66..49aa2a777 100644
--- a/web/pages/profile/preferences/theme.tsx
+++ b/web/pages/profile/preferences/theme.tsx
@@ -54,7 +54,7 @@ const ProfilePreferencesThemePage: NextPageWithLayout = observer(() => {
     <>
       <PageHead title="Profile - Theme Prefrence" />
       {currentUser ? (
-        <div className="mx-auto mt-10 h-full w-full overflow-y-auto px-6 pb-8 md:mt-14 lg:px-20">
+        <div className="mx-auto mt-10 h-full w-full overflow-y-auto px-6 pb-8 md:mt-14 lg:px-20 vertical-scrollbar scrollbar-md">
           <div className="flex items-center border-b border-custom-border-100 pb-3.5">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>