From 5d331477efac49e27801d49c774c32fc20bf3d2b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 15 Sep 2023 19:30:53 +0530
Subject: [PATCH] chore: settings bug fixes and ui improvement (#2198)

* fix: settings bug fixes and ui improvement

* chore: setting sidebar scroll fix & code refactor
---
 web/components/exporter/guide.tsx             |  4 +-
 web/components/integration/guide.tsx          |  4 +-
 web/components/project/member-select.tsx      | 14 ++++-
 web/components/project/settings-sidebar.tsx   |  6 +--
 .../[workspaceSlug]/me/profile/activity.tsx   |  8 +--
 .../[workspaceSlug]/me/profile/index.tsx      |  6 +--
 .../me/profile/preferences.tsx                |  6 +--
 .../[projectId]/settings/automations.tsx      |  6 +--
 .../[projectId]/settings/estimates.tsx        |  6 +--
 .../[projectId]/settings/features.tsx         |  6 +--
 .../projects/[projectId]/settings/index.tsx   | 28 +++++-----
 .../[projectId]/settings/integrations.tsx     | 54 ++++++++++---------
 .../projects/[projectId]/settings/labels.tsx  |  6 +--
 .../projects/[projectId]/settings/members.tsx |  6 +--
 .../projects/[projectId]/settings/states.tsx  |  6 +--
 .../[workspaceSlug]/settings/billing.tsx      |  6 +--
 .../[workspaceSlug]/settings/exports.tsx      |  6 +--
 .../[workspaceSlug]/settings/imports.tsx      |  9 ++--
 web/pages/[workspaceSlug]/settings/index.tsx  |  6 +--
 .../[workspaceSlug]/settings/integrations.tsx | 10 ++--
 .../[workspaceSlug]/settings/members.tsx      |  6 +--
 21 files changed, 108 insertions(+), 101 deletions(-)

diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 45fc50270..2643a07cf 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -147,7 +147,9 @@ const IntegrationGuide = () => {
                     </div>
                   </div>
                 ) : (
-                  <p className="py-2 text-sm text-custom-text-200">No previous export available.</p>
+                  <p className="text-sm text-custom-text-200 px-4 py-6">
+                    No previous export available.
+                  </p>
                 )
               ) : (
                 <Loader className="mt-6 grid grid-cols-1 gap-3">
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index a819566bf..2ee0e0121 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -129,7 +129,7 @@ const IntegrationGuide = () => {
                   </button>
                 </h3>
               </div>
-              <div className="flex flex-col px-4 py-6">
+              <div className="flex flex-col">
                 {importerServices ? (
                   importerServices.length > 0 ? (
                     <div className="space-y-2">
@@ -145,7 +145,7 @@ const IntegrationGuide = () => {
                       </div>
                     </div>
                   ) : (
-                    <p className="py-2 text-sm text-custom-text-200">
+                    <p className="text-sm text-custom-text-200 px-4 py-6">
                       No previous imports available.
                     </p>
                   )
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 5a1ec5cb1..64baa945d 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -8,6 +8,8 @@ import useSWR from "swr";
 import projectService from "services/project.service";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
+// icon
+import { Ban } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -49,7 +51,10 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
           {selectedOption ? (
             selectedOption?.display_name
           ) : (
-            <span className="text-sm py-0.5 text-custom-sidebar-text-400">Select</span>
+            <div className="flex items-center gap-2">
+              <Ban className="h-3.5 w-3.5 text-custom-sidebar-text-400 rotate-90" />
+              <span className="text-sm py-0.5 text-custom-sidebar-text-400">None</span>
+            </div>
           )}
         </div>
       }
@@ -61,7 +66,12 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
           {
             value: "none",
             query: "none",
-            content: <div className="flex items-center gap-2">None</div>,
+            content: (
+              <div className="flex items-center gap-2">
+                <Ban className="h-3.5 w-3.5 text-custom-sidebar-text-400 rotate-90" />
+                <span className="text-sm py-0.5 text-custom-sidebar-text-400">None</span>
+              </div>
+            ),
           },
         ]
       }
diff --git a/web/components/project/settings-sidebar.tsx b/web/components/project/settings-sidebar.tsx
index a147c8a3a..123dc6282 100644
--- a/web/components/project/settings-sidebar.tsx
+++ b/web/components/project/settings-sidebar.tsx
@@ -2,11 +2,7 @@ import React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 
-type Props = {
-  profilePage?: boolean;
-};
-
-export const SettingsSidebar: React.FC<Props> = ({ profilePage = false }) => {
+export const SettingsSidebar = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 6313e9507..ee527829b 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -38,13 +38,13 @@ const ProfileActivity = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
 
         {userActivity ? (
-          <section className="pr-9 py-8 w-full">
+          <section className="pr-9 py-8 w-full overflow-y-auto">
             <div className="flex items-center py-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Acitivity</h3>
             </div>
@@ -168,7 +168,7 @@ const ProfileActivity = () => {
                                         />
                                       ) : (
                                         <div
-                                          className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
+                                          className={`grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
                                         >
                                           {activityItem.actor_detail.display_name?.charAt(0)}
                                         </div>
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 6b083143e..c536c384a 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -167,11 +167,11 @@ const Profile: NextPage = () => {
       />
       {myProfile ? (
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex flex-row gap-2">
-            <div className="w-80 py-8">
+          <div className="flex flex-row gap-2 h-full">
+            <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
               <SettingsSidebar />
             </div>
-            <div className={`flex flex-col gap-8 pr-9 py-9 w-full`}>
+            <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
               <div className="relative h-44 w-full mt-6">
                 <img
                   src={
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
index 031ed367c..b1b16a3d4 100644
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -59,12 +59,12 @@ const ProfilePreferences = observer(() => {
       }
     >
       {myProfile ? (
-        <div className="flex flex-row gap-2">
-          <div className="w-80 py-8">
+        <div className="flex flex-row gap-2 h-full">
+          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
             <SettingsSidebar />
           </div>
 
-          <div className="pr-9 py-8 w-full">
+          <div className="pr-9 py-8 w-full overflow-y-auto">
             <div className="flex items-center py-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Acitivity</h3>
             </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index ec6a57161..5dcea0838 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -75,11 +75,11 @@ const AutomationsSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Automations</h3>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index b25035d9c..21e68563a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -125,11 +125,11 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="flex flex-row gap-2 h-full overflow-hidden">
-          <div className="w-80 py-8">
+        <div className="flex flex-row gap-2 h-full">
+          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
             <SettingsSidebar />
           </div>
-          <div className="pr-9 py-8 flex flex-col w-full">
+          <div className="pr-9 py-8 flex flex-col w-full overflow-y-auto">
             <section className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Estimates</h3>
               <div className="col-span-12 space-y-5 sm:col-span-7">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index e72616c0a..499aaea86 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -153,11 +153,11 @@ const FeaturesSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Features</h3>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index cd9e9e6ec..6fc2f05d8 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -190,21 +190,21 @@ const GeneralSettings: NextPage = () => {
         onClose={() => setSelectedProject(null)}
         user={user}
       />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="flex flex-row gap-2">
-          <div className="w-80 py-8">
-            <SettingsSidebar />
-          </div>
-          <div className={`pr-9 py-8 w-full ${isAdmin ? "" : "opacity-60"}`}>
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
+          <SettingsSidebar />
+        </div>
+        <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
+          <form onSubmit={handleSubmit(onSubmit)}>
             <div className="relative h-44 w-full mt-6">
               <img
                 src={watch("cover_image")!}
                 alt={watch("cover_image")!}
                 className="h-44 w-full rounded-md object-cover"
               />
-              <div className="flex items-end justify-between absolute bottom-4 w-full px-4">
-                <div className="flex gap-3">
-                  <div className="flex items-center justify-center bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+              <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+                <div className="flex gap-3 flex-grow truncate">
+                  <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
                     {projectDetails ? (
                       <div className="h-7 w-7 grid place-items-center">
                         <Controller
@@ -226,8 +226,8 @@ const GeneralSettings: NextPage = () => {
                       </Loader>
                     )}
                   </div>
-                  <div className="flex flex-col gap-1 text-white">
-                    <span className="text-lg font-semibold">{watch("name")}</span>
+                  <div className="flex flex-col gap-1 text-white truncate">
+                    <span className="text-lg font-semibold truncate">{watch("name")}</span>
                     <span className="flex items-center gap-2 text-sm">
                       <span>
                         {watch("identifier")} . {currentNetwork?.label}
@@ -236,7 +236,7 @@ const GeneralSettings: NextPage = () => {
                   </div>
                 </div>
 
-                <div className="flex justify-center">
+                <div className="flex justify-center flex-shrink-0">
                   {projectDetails ? (
                     <div>
                       <Controller
@@ -442,9 +442,9 @@ const GeneralSettings: NextPage = () => {
                 )}
               </Disclosure>
             )}
-          </div>
+          </form>
         </div>
-      </form>
+      </div>
     </ProjectAuthorizationWrapper>
   );
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index cd1e68792..ca64b8e22 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -54,18 +54,20 @@ const ProjectIntegrations: NextPage = () => {
             link={`/${workspaceSlug}/projects/${projectId}/issues`}
             linkTruncate
           />
-          <BreadcrumbItem title="Integrations" unshrinkTitle />
+          <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2 h-full overflow-hidden">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        {workspaceIntegrations ? (
-          workspaceIntegrations.length > 0 ? (
-            <section className="pr-9 py-8 overflow-y-auto w-full">
-              <IntegrationAndImportExportBanner bannerName="Integrations" />
+        <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
+          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+            <h3 className="text-xl font-medium">Integrations</h3>
+          </div>
+          {workspaceIntegrations ? (
+            workspaceIntegrations.length > 0 ? (
               <div>
                 {workspaceIntegrations.map((integration) => (
                   <SingleIntegration
@@ -74,26 +76,26 @@ const ProjectIntegrations: NextPage = () => {
                   />
                 ))}
               </div>
-            </section>
+            ) : (
+              <EmptyState
+                title="You haven't configured integrations"
+                description="Configure GitHub and other integrations to sync your project issues."
+                image={emptyIntegration}
+                primaryButton={{
+                  text: "Configure now",
+                  onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
+                }}
+              />
+            )
           ) : (
-            <EmptyState
-              title="You haven't configured integrations"
-              description="Configure GitHub and other integrations to sync your project issues."
-              image={emptyIntegration}
-              primaryButton={{
-                text: "Configure now",
-                onClick: () => router.push(`/${workspaceSlug}/settings/integrations`),
-              }}
-            />
-          )
-        ) : (
-          <Loader className="space-y-5">
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-            <Loader.Item height="40px" />
-          </Loader>
-        )}
+            <Loader className="space-y-5">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          )}
+        </div>
       </div>
     </ProjectAuthorizationWrapper>
   );
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 72df3ce85..13b290152 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -113,11 +113,11 @@ const LabelsSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="flex flex-row gap-2 h-full w-full">
-          <div className="w-80 py-8">
+        <div className="flex flex-row gap-2 h-full">
+          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
             <SettingsSidebar />
           </div>
-          <section className="pr-9 py-8 gap-10 h-full w-full">
+          <section className="pr-9 py-8 gap-10 w-full overflow-y-auto">
             <div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Labels</h3>
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index ca1045568..59e218ee4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -273,11 +273,11 @@ const MembersSettings: NextPage = () => {
         user={user}
         onSuccess={() => mutateMembers()}
       />
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Defaults</h3>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 9a7d2060a..88be296c4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -73,11 +73,11 @@ const StatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="flex flex-row gap-2">
-          <div className="w-80 py-8">
+        <div className="flex flex-row gap-2 h-full">
+          <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
             <SettingsSidebar />
           </div>
-          <div className="pr-9 py-8 gap-10 w-full">
+          <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
             <div className="flex items-center py-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">States</h3>
             </div>
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index aaa64f97e..898b716bf 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -43,11 +43,11 @@ const BillingSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2 h-full overflow-hidden">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div>
             <div className="flex  items-center py-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Billing & Plan</h3>
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index b825e0cea..f600f82f7 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -40,11 +40,11 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <div className="pr-9 py-8 overflow-y-auto w-full">
+        <div className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Exports</h3>
           </div>
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index 205923f7c..a8a5c8dc0 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -40,18 +40,15 @@ const ImportExport: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2 h-full overflow-hidden">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Imports</h3>
           </div>
           <IntegrationGuide />
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
-            <h3 className="text-xl font-medium">Previous Imports</h3>
-          </div>
         </section>
       </div>
     </WorkspaceAuthorizationLayout>
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index ffad4a55c..4f576aa0a 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -183,12 +183,12 @@ const WorkspaceSettings: NextPage = () => {
         data={activeWorkspace ?? null}
         user={user}
       />
-      <div className="flex flex-row gap-2 h-full w-full">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
         {activeWorkspace ? (
-          <div className={`pr-9 py-8 w-full  ${isAdmin ? "" : "opacity-60"}`}>
+          <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
             <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
               <div className="flex flex-col gap-1">
                 <button
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 99508512f..822860d03 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -44,15 +44,15 @@ const WorkspaceIntegrations: NextPage = () => {
             link={`/${workspaceSlug}`}
             linkTruncate
           />
-          <BreadcrumbItem title="Integrations" unshrinkTitle />
+          <BreadcrumbItem title="Integrations Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <IntegrationAndImportExportBanner bannerName="Integrations" />
           <div>
             {appIntegrations ? (
@@ -60,7 +60,7 @@ const WorkspaceIntegrations: NextPage = () => {
                 <SingleIntegrationCard key={integration.id} integration={integration} />
               ))
             ) : (
-              <Loader className="space-y-1">
+              <Loader className="space-y-2.5 mt-4">
                 <Loader.Item height="89px" />
                 <Loader.Item height="89px" />
               </Loader>
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 435bdd24e..0f0bc32ae 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -186,11 +186,11 @@ const MembersSettings: NextPage = () => {
         user={user}
         onSuccess={handleInviteModalSuccess}
       />
-      <div className="flex flex-row gap-2">
-        <div className="w-80 py-8">
+      <div className="flex flex-row gap-2 h-full">
+        <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
-        <section className="pr-9 py-8 w-full">
+        <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center justify-between gap-4 pt-2 pb-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
             <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>