[WEB-327] chore: scrollbar implementation (#3703)

* style: custom scrollbar added

* chore: scrollbar added in issue layouts

* chore: scrollbar added in sidebar and workspace pages

* chore: calendar layout fix

* chore: project level scrollbar added

* chore: scrollbar added in command k modal

* fix: calendar layout alignment fix

web/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -47,7 +47,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
     <>
       {!defaultAnalyticsError ? (
         defaultAnalytics ? (
-          <div className="h-full overflow-y-auto p-5 text-sm">
+          <div className="h-full overflow-y-auto p-5 text-sm vertical-scrollbar scrollbar-lg">
             <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope defaultAnalytics={defaultAnalytics} />

web/components/command-palette/command-modal.tsx

@@ -229,7 +229,7 @@ export const CommandModal: React.FC = observer(() => {
                     />
                   </div>
 
-                  <Command.List className="max-h-96 overflow-scroll p-2">
+                  <Command.List className="max-h-96 overflow-scroll p-2 vertical-scrollbar scrollbar-sm">
                     {searchTerm !== "" && (
                       <h5 className="mx-[3px] my-4 text-xs text-custom-text-100">
                         Search results for{" "}

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -125,7 +125,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
       </Tab.List>
       <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
-        <Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel
+          as="div"
+          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+        >
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)
@@ -182,7 +185,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
             </div>
           )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel
+          as="div"
+          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+        >
           {distribution?.labels.length > 0 ? (
             distribution.labels.map((label, index) => (
               <SingleProgressStats
@@ -222,7 +228,10 @@ export const SidebarProgressStats: React.FC<Props> = ({
             </div>
           )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel
+          as="div"
+          className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
+        >
           {Object.keys(groupedIssues).map((group, index) => (
             <SingleProgressStats
               key={index}

web/components/cycles/active-cycle-stats.tsx

@@ -69,7 +69,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       </Tab.List>
       {cycle && cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
+          <Tab.Panel
+            as="div"
+            className="flex h-44 w-full flex-col gap-1 overflow-y-auto pt-3.5 p-4 pr-0 text-custom-text-200 vertical-scrollbar scrollbar-sm"
+          >
             {cycle.distribution?.assignees?.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
@@ -104,7 +107,11 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel as="div" className="w-full items-center gap-1 overflow-y-scroll p-4 text-custom-text-200">
+
+          <Tab.Panel
+            as="div"
+            className="flex h-44 w-full flex-col gap-1 overflow-y-auto pt-3.5 p-4 pr-0 text-custom-text-200 vertical-scrollbar scrollbar-sm"
+          >
             {cycle.distribution?.labels?.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}

web/components/cycles/cycles-board.tsx

@@ -39,7 +39,7 @@ export const CyclesBoard: FC<ICyclesBoard> = observer((props) => {
                 peekCycle
                   ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
                   : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-              } auto-rows-max transition-all `}
+              } auto-rows-max transition-all  vertical-scrollbar scrollbar-lg`}
             >
               {cycleIds.map((cycleId) => (
                 <CyclesBoardCard key={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />

web/components/cycles/cycles-list.tsx

@@ -37,7 +37,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
           {cycleIds.length > 0 ? (
             <div className="h-full overflow-y-auto">
               <div className="flex h-full w-full justify-between">
-                <div className="flex h-full w-full flex-col overflow-y-auto">
+                <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
                   {cycleIds.map((cycleId) => (
                     <CyclesListItem
                       key={cycleId}

web/components/gantt-chart/chart/main-content.tsx

@@ -90,7 +90,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
       // DO NOT REMOVE THE ID
       id="gantt-container"
       className={cn(
-        "h-full w-full overflow-auto horizontal-scroll-enable flex border-t-[0.5px] border-custom-border-200",
+        "h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-custom-border-200",
         {
           "mb-8": bottomSpacing,
         }

web/components/inbox/sidebar/inbox-list.tsx

@@ -18,7 +18,7 @@ export const InboxIssueList: FC<TInboxIssueList> = observer((props) => {
 
   if (!inboxIssueIds) return <></>;
   return (
-    <div className="overflow-y-auto w-full h-full">
+    <div className="overflow-y-auto w-full h-full vertical-scrollbar scrollbar-md">
       {inboxIssueIds.map((issueId) => (
         <InboxIssueListItem workspaceSlug={workspaceSlug} projectId={projectId} inboxId={inboxId} issueId={issueId} />
       ))}

web/components/issues/issue-detail/inbox/root.tsx

@@ -138,7 +138,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   if (!issue) return <></>;
   return (
     <div className="flex h-full overflow-hidden">
-      <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5">
+      <div className="h-full w-2/3 space-y-5 divide-y-2 divide-custom-border-300 overflow-y-auto p-5 vertical-scrollbar scrollbar-md">
         <InboxIssueMainContent
           workspaceSlug={workspaceSlug}
           projectId={projectId}

web/components/issues/issue-detail/label/select/label-select.tsx

@@ -104,11 +104,12 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
 
         <Combobox.Options className="fixed z-10">
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none`}
+            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
+            <div className="px-2">
               <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
                 <Search className="h-3.5 w-3.5 text-custom-text-300" />
                 <Combobox.Input
@@ -119,7 +120,8 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                   displayValue={(assigned: any) => assigned?.name}
                 />
               </div>
-            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+            </div>
+            <div className={`mt-2 max-h-48 space-y-1 px-2 pr-0 overflow-y-scroll vertical-scrollbar scrollbar-sm`}>
               {isLoading ? (
                 <p className="text-center text-custom-text-200">Loading...</p>
               ) : filteredOptions.length > 0 ? (

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -74,7 +74,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
       <div className="flex h-full w-full flex-col overflow-hidden">
         <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
         <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
-        <div className="h-full w-full overflow-y-auto">
+        <div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg">
           {layout === "month" && (
             <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-400">
               {allWeeksOfActiveMonth &&

web/components/issues/issue-layouts/calendar/week-header.tsx

@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative grid divide-x-[0.5px] divide-custom-border-400 text-sm font-medium ${
+      className={`relative grid divide-x-[0.5px] divide-custom-border-400 text-sm font-medium pr-[1rem] ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -249,7 +249,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       )}
 
       <div
-        className="flex horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90"
+        className="flex relative h-full w-full overflow-auto bg-custom-background-90 vertical-scrollbar horizontal-scrollbar scrollbar-lg"
         ref={scrollableContainerRef}
       >
         <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">

web/components/issues/issue-layouts/list/default.tsx

@@ -108,7 +108,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div ref={containerRef} className="relative overflow-auto h-full w-full">
+    <div ref={containerRef} className="relative overflow-auto h-full w-full vertical-scrollbar scrollbar-lg">
       {groups &&
         groups.length > 0 &&
         groups.map(

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -183,7 +183,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
-      <div className="relative h-full w-full overflow-auto">
+      <div className="relative h-full w-full flex flex-col">
         <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
         {issueIds.length === 0 ? (
           <EmptyState

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -66,7 +66,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   return (
     <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
-      <div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
+      <div ref={containerRef} className="vertical-scrollbar horizontal-scrollbar scrollbar-lg h-full w-full">
         <SpreadsheetTable
           displayProperties={displayProperties}
           displayFilters={displayFilters}

web/components/issues/peek-overview/view.tsx

@@ -109,7 +109,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
               disabled={disabled}
             />
             {/* content */}
-            <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+            <div className="relative h-full w-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md">
               {isLoading && !issue ? (
                 <div className="flex h-full w-full items-center justify-center">
                   <Spinner />
@@ -140,7 +140,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
                       </div>
                     ) : (
-                      <div className={`flex h-full w-full overflow-auto`}>
+                      <div className={`flex h-full w-full overflow-auto vertical-scrollbar`}>
                         <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
                           <div>
                             <PeekOverviewIssueDetails

web/components/modules/modules-list-view.tsx

@@ -51,7 +51,7 @@ export const ModulesListView: React.FC = observer(() => {
           {modulesView === "list" && (
             <div className="h-full overflow-y-auto">
               <div className="flex h-full w-full justify-between">
-                <div className="flex h-full w-full flex-col overflow-y-auto">
+                <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
                   {projectModuleIds.map((moduleId) => (
                     <ModuleListItem key={moduleId} moduleId={moduleId} />
                   ))}
@@ -71,7 +71,7 @@ export const ModulesListView: React.FC = observer(() => {
                     peekModule
                       ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
                       : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-                  } auto-rows-max transition-all `}
+                  } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
                 >
                   {projectModuleIds.map((moduleId) => (
                     <ModuleCardItem key={moduleId} moduleId={moduleId} />

web/components/notifications/notification-popover.tsx

@@ -125,7 +125,7 @@ export const NotificationPopover = observer(() => {
 
               {notifications ? (
                 notifications.length > 0 ? (
-                  <div className="h-full overflow-y-auto">
+                  <div className="h-full overflow-y-auto vertical-scrollbar scrollbar-md">
                     <div className="divide-y divide-custom-border-100">
                       {notifications.map((notification) => (
                         <NotificationCard

web/components/page-views/workspace-dashboard.tsx

@@ -70,7 +70,7 @@ export const WorkspaceDashboardView = observer(() => {
           {joinedProjectIds.length > 0 ? (
             <>
               <IssuePeekOverview />
-              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">
                 {currentUser && <UserGreetingsView user={currentUser} />}
 
                 <DashboardWidgets />

web/components/pages/pages-list/list-view.tsx

@@ -51,7 +51,7 @@ export const PagesListView: FC<IPagesListView> = (props) => {
   return (
     <>
       {projectPageIds && workspaceSlug && projectId ? (
-        <div className="h-full space-y-4 overflow-y-auto">
+        <div className="h-full space-y-4 overflow-y-auto vertical-scrollbar scrollbar-lg">
           {projectPageIds.length > 0 ? (
             <ul role="list" className="divide-y divide-custom-border-200">
               {projectPageIds.map((pageId: string) => (

web/components/project/card-list.tsx

@@ -32,7 +32,7 @@ export const ProjectCardList = observer(() => {
   return (
     <>
       {workspaceProjectIds.length > 0 ? (
-        <div className="h-full w-full overflow-y-auto p-8">
+        <div className="h-full w-full overflow-y-auto p-8 vertical-scrollbar scrollbar-lg">
           {searchedProjects.length == 0 ? (
             <div className="mt-10 w-full text-center text-custom-text-400">No matching projects</div>
           ) : (

web/components/project/sidebar-list.tsx

@@ -109,7 +109,7 @@ export const ProjectSidebarList: FC = observer(() => {
       )}
       <div
         ref={containerRef}
-        className={`h-full space-y-2 overflow-y-auto px-4 ${
+        className={`h-full space-y-2 overflow-y-auto pl-4 vertical-scrollbar scrollbar-md ${
           isScrolled ? "border-t border-custom-sidebar-border-300" : ""
         }`}
       >

web/components/ui/loader/layouts/calendar-layout-loader.tsx

@@ -28,7 +28,7 @@ export const CalendarLayoutLoader = () => (
         <span className="h-7 w-20 bg-custom-background-80 rounded" />
       </div>
     </div>
-    <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
+    <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5 pr-[1rem]">
       {[...Array(5)].map((_, index) => (
         <span key={index} className="h-11 w-full bg-custom-background-80" />
       ))}

web/components/views/views-list.tsx

@@ -44,7 +44,7 @@ export const ProjectViewsList = observer(() => {
     <>
       {viewsList.length > 0 ? (
         <div className="flex h-full w-full flex-col">
-          <div className="flex w-full flex-col overflow-hidden">
+          <div className="flex w-full flex-col flex-shrink-0 overflow-hidden">
             <div className="flex w-full items-center gap-2.5 border-b border-custom-border-200 px-5 py-3">
               <Search className="text-custom-text-200" size={14} strokeWidth={2} />
               <Input
@@ -56,12 +56,14 @@ export const ProjectViewsList = observer(() => {
               />
             </div>
           </div>
+          <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
             {filteredViewsList.length > 0 ? (
               filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
             ) : (
               <p className="mt-10 text-center text-sm text-custom-text-300">No results found</p>
             )}
           </div>
+        </div>
       ) : (
         <EmptyState
           title={VIEW_EMPTY_STATE_DETAILS["project-views"].title}

web/components/workspace/sidebar-dropdown.tsx

@@ -110,12 +110,14 @@ export const WorkspaceSidebarDropdown = observer(() => {
           <>
             <Menu.Button className="group/menu-button h-full w-full truncate rounded-md text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none">
               <div
-                className={`flex items-center  gap-x-2 truncate rounded p-1 ${sidebarCollapsed ? "justify-center" : "justify-between"
+                className={`flex items-center  gap-x-2 truncate rounded p-1 ${
+                  sidebarCollapsed ? "justify-center" : "justify-between"
                 }`}
               >
                 <div className="flex items-center gap-2 truncate">
                   <div
-                    className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${!activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
+                    className={`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
+                      !activeWorkspace?.logo && "rounded bg-custom-primary-500 text-white"
                     }`}
                   >
                     {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
@@ -136,7 +138,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
                 </div>
                 {!sidebarCollapsed && (
                   <ChevronDown
-                    className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${open ? "rotate-180" : ""
+                    className={`mx-1 hidden h-4 w-4 flex-shrink-0 group-hover/menu-button:block ${
+                      open ? "rotate-180" : ""
                     } text-custom-sidebar-text-400 duration-300`}
                   />
                 )}
@@ -153,8 +156,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
             >
               <Menu.Items as={Fragment}>
                 <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-custom-border-100 outline-none">
-                  <div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4">
-                    <h6 className="sticky top-0 z-10 h-full w-full bg-custom-background-100 pt-3 text-sm font-medium text-custom-sidebar-text-400">
+                  <div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4 vertical-scrollbar scrollbar-sm">
+                    <h6 className="sticky top-0 z-10 h-full w-full pt-3 text-sm font-medium text-custom-sidebar-text-400">
                       {currentUser?.email}
                     </h6>
                     {workspacesList ? (
@@ -176,7 +179,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
                               >
                                 <div className="flex items-center justify-start gap-2.5 truncate">
                                   <span
-                                    className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${!workspace?.logo && "rounded bg-custom-primary-500 text-white"
+                                    className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
+                                      !workspace?.logo && "rounded bg-custom-primary-500 text-white"
                                     }`}
                                   >
                                     {workspace?.logo && workspace.logo !== "" ? (
@@ -190,7 +194,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
                                     )}
                                   </span>
                                   <h5
-                                    className={`truncate text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                    className={`truncate text-sm font-medium ${
+                                      workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
                                     }`}
                                   >
                                     {workspace.name}
@@ -215,10 +220,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                     )}
                   </div>
                   <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
-                    <Link
-                      href="/create-workspace"
-                      className="w-full"
-                    >
+                    <Link href="/create-workspace" className="w-full">
                       <Menu.Item
                         as="div"
                         className="flex items-center gap-2 rounded px-2 py-1 text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80 font-medium"

web/components/workspace/views/header.tsx

@@ -74,7 +74,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div className="group relative flex border-b border-custom-border-200">
-        <div className="flex w-full items-center overflow-x-auto px-4">
+        <div className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm">
           {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
             <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
               <span

web/components/workspace/workspace-active-cycles-upgrade.tsx

@@ -19,7 +19,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
   const isDarkMode = currentUser?.theme.theme === "dark";
 
   return (
-    <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full">
+    <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full vertical-scrollbar scrollbar-lg">
       <div
         className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": currentUser?.theme.theme === "dark",

web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -67,7 +67,7 @@ const CycleDetailPage: NextPageWithLayout = observer(() => {
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div
-                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
                 style={{
                   boxShadow:
                     "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -66,7 +66,7 @@ const ModuleIssuesPage: NextPageWithLayout = observer(() => {
           </div>
           {moduleId && !isSidebarCollapsed && (
             <div
-              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300"
+              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 vertical-scrollbar scrollbar-sm"
               style={{
                 boxShadow:
                   "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -142,8 +142,8 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
               projectId={projectId.toString()}
             />
           )}
-          <div className="flex h-full flex-col md:space-y-5 overflow-hidden md:p-6">
-            <div className="justify-between gap-4 hidden md:flex">
+          <div className="flex h-full flex-col md:space-y-5 overflow-hidden md:py-6">
+            <div className="justify-between gap-4 hidden md:flex px-6">
               <h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
             </div>
             <Tab.Group
@@ -171,7 +171,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
               {windowWidth < 768 ? (
                 <MobileTabList />
               ) : (
-                <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
+                <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex px-6">
                   <div className="flex flex-wrap items-center gap-4">
                     {PAGE_TABS_LIST.map((tab) => (
                       <Tab
@@ -192,22 +192,22 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
               )}
 
               <Tab.Panels as={Fragment}>
-                <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
+                <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto vertical-scrollbar scrollbar-lg pl-6">
                   <RecentPagesList />
                 </Tab.Panel>
-                <Tab.Panel as="div" className="h-full overflow-hidden">
+                <Tab.Panel as="div" className="h-full overflow-hidden pl-6">
                   <AllPagesList />
                 </Tab.Panel>
-                <Tab.Panel as="div" className="h-full overflow-hidden">
+                <Tab.Panel as="div" className="h-full overflow-hidden pl-6">
                   <FavoritePagesList />
                 </Tab.Panel>
-                <Tab.Panel as="div" className="h-full overflow-hidden">
+                <Tab.Panel as="div" className="h-full overflow-hidden pl-6">
                   <PrivatePagesList />
                 </Tab.Panel>
-                <Tab.Panel as="div" className="h-full overflow-hidden">
+                <Tab.Panel as="div" className="h-full overflow-hidden pl-6">
                   <SharedPagesList />
                 </Tab.Panel>
-                <Tab.Panel as="div" className="h-full overflow-hidden">
+                <Tab.Panel as="div" className="h-full overflow-hidden pl-6">
                   <ArchivedPagesList />
                 </Tab.Panel>
               </Tab.Panels>

web/pages/[workspaceSlug]/workspace-views/index.tsx

@@ -27,9 +27,8 @@ const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="flex flex-col">
-        <div className="flex h-full w-full flex-col overflow-hidden">
-          <div className="flex w-full items-center gap-2.5 border-b border-custom-border-200 px-5 py-3">
+      <div className="flex flex-col h-full w-full overflow-hidden">
+        <div className="flex h-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-custom-border-200">
           <Search className="text-custom-text-200" size={14} strokeWidth={2} />
           <Input
             className="w-full bg-transparent !p-0 text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
@@ -39,12 +38,15 @@ const WorkspaceViewsPage: NextPageWithLayout = observer(() => {
             mode="true-transparent"
           />
         </div>
-        </div>
-        {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
+        <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
+          {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map(
+            (option) => (
               <GlobalDefaultViewListItem key={option.key} view={option} />
-        ))}
+            )
+          )}
           <GlobalViewsList searchQuery={query} />
         </div>
+      </div>
     </>
   );
 });

web/styles/globals.css

@@ -294,41 +294,6 @@ body {
   display: none;
 }
 
-.horizontal-scroll-enable {
-  overflow-x: scroll;
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar {
-  display: block;
-  height: 7px;
-  width: 0;
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar-track {
-  height: 7px;
-  background-color: rgba(var(--color-background-100));
-}
-
-.horizontal-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-scrollbar));
-}
-
-.vertical-scroll-enable::-webkit-scrollbar {
-  display: block;
-  width: 5px;
-}
-
-.vertical-scroll-enable::-webkit-scrollbar-track {
-  width: 5px;
-}
-
-.vertical-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-90));
-}
-/* end scrollbar style */
-
 .tags-input-container {
   border: 2px solid #000;
   padding: 0.5em;
@@ -538,3 +503,86 @@ div.web-view-spinner div.bar12 {
   animation-delay: -0.0833s;
   -webkit-animation-delay: -0.0833s;
 }
+
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+  }
+  .vertical-scrollbar:hover,
+  .horizontal-scrollbar:hover {
+    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+  }
+  .vertical-scrollbar:active,
+  .horizontal-scrollbar:active {
+    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+  }
+}
+
+.vertical-scrollbar {
+  overflow-y: scroll;
+}
+.horizontal-scrollbar {
+  overflow-x: scroll;
+}
+.vertical-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar {
+  display: block;
+}
+.vertical-scrollbar::-webkit-scrollbar-track,
+.horizontal-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb,
+.horizontal-scrollbar::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  background-color: rgba(96, 100, 108, 0.1);
+  border-radius: 9999px;
+}
+.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
+.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(96, 100, 108, 0.25);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(96, 100, 108, 0.5);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:active,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: rgba(96, 100, 108, 0.7);
+}
+.vertical-scrollbar::-webkit-scrollbar-corner,
+.horizontal-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* scrollbar sm size */
+.scrollbar-sm::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+.scrollbar-sm::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar md size */
+.scrollbar-md::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+.scrollbar-md::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar lg size */
+
+.scrollbar-lg::-webkit-scrollbar {
+  height: 16px;
+  width: 16px;
+}
+.scrollbar-lg::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+}