From 1fed5f78464e789e471f35b5fda2a94f92fcb5cf Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sat, 20 May 2023 03:08:23 +0530
Subject: [PATCH] style: active cycle stats tab sticky (#1092)

---
 apps/app/components/cycles/active-cycle-details.tsx |  2 +-
 apps/app/components/cycles/active-cycle-stats.tsx   | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
index 7bb357709..65c2e8b1b 100644
--- a/apps/app/components/cycles/active-cycle-details.tsx
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -449,7 +449,7 @@ export const ActiveCycleDetails: React.FC<TSingleStatProps> = ({ cycle, isComple
               </div>
             </div>
           </div>
-          <div className="border-brand-base h-60 overflow-y-auto p-4">
+          <div className="border-brand-base h-60 overflow-y-scroll">
             <ActiveCycleProgressStats issues={issues ?? []} />
           </div>
         </div>
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
index 2a8be9575..0ef85e4b3 100644
--- a/apps/app/components/cycles/active-cycle-stats.tsx
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -73,7 +73,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
         }
       }}
     >
-      <Tab.List as="div" className="flex flex-wrap items-center justify-start gap-4 text-sm">
+      <Tab.List
+        as="div"
+        className="flex sticky top-0 z-10 bg-brand-base w-full px-4 pt-4 pb-1 flex-wrap items-center justify-start gap-4 text-sm"
+      >
         <Tab
           className={({ selected }) =>
             `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
@@ -93,10 +96,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
           Labels
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full">
+      <Tab.Panels className="flex w-full px-4 pb-4">
         <Tab.Panel
           as="div"
-          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+          className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
         >
           {members?.map((member, index) => {
             const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
@@ -147,7 +150,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ issues }) => {
         </Tab.Panel>
         <Tab.Panel
           as="div"
-          className="flex flex-col w-full mt-2 gap-1 items-center text-brand-secondary"
+          className="flex flex-col w-full mt-2 gap-1 overflow-y-scroll items-center text-brand-secondary"
         >
           {issueLabels?.map((label, index) => {
             const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));