[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,22 +104,24 @@ 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="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
-                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
+            <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
+                  className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder="Search"
+                  displayValue={(assigned: any) => assigned?.name}
+                />
+              </div>
             </div>
-            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+            <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,11 +56,13 @@ export const ProjectViewsList = observer(() => {
               />
             </div>
           </div>
-          {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 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