From 939d90e5b75d2da7c7ebc618d8d395e890e61910 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Thu, 28 May 2026 12:00:00 +0530
Subject: [PATCH 01/11] feat: revamp member profile page with new layout and
 components

---
 frontend/src/app/members/[memberKey]/page.tsx | 161 ++++++------------
 frontend/src/components/InfoBlock.tsx         |  17 +-
 frontend/src/components/RepositoryCard.tsx    |   4 +-
 .../components/cards/MemberDetailSidebar.tsx  | 100 +++++++++++
 .../components/cards/RepositoriesModules.tsx  |   2 +-
 5 files changed, 159 insertions(+), 125 deletions(-)
 create mode 100644 frontend/src/components/cards/MemberDetailSidebar.tsx

diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 15e69f3ef6..c8e593fce3 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -1,89 +1,30 @@
 'use client'
 import { useQuery } from '@apollo/client/react'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import React, { useEffect, useMemo } from 'react'
-import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
-import { Badge } from 'types/badge'
 import { User } from 'types/user'
-import { formatDate } from 'utils/dateFormatter'
-import Badges from 'components/Badges'
-import Contributions from 'components/cards/Contributions'
-import Contributors from 'components/cards/Contributors'
-import Header from 'components/cards/Header'
-import IssuesMilestones from 'components/cards/IssuesMilestones'
-import Metadata from 'components/cards/Metadata'
+import MemberDetailSidebar from 'components/cards/MemberDetailSidebar'
 import PageWrapper from 'components/cards/PageWrapper'
 import RepositoriesModules from 'components/cards/RepositoriesModules'
-import Summary from 'components/cards/Summary'
 import ContributionHeatmap from 'components/ContributionHeatmap'
+import Milestones from 'components/Milestones'
+import RecentIssues from 'components/RecentIssues'
+import RecentPullRequests from 'components/RecentPullRequests'
+import RecentReleases from 'components/RecentReleases'
+import SecondaryCard from 'components/SecondaryCard'
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
-type DateRange = { startDate: string; endDate: string }
-
 interface UserSummaryProps {
   user: User | null
-  contributionData: Record<string, number>
-  dateRange: DateRange
-  hasContributionData: boolean
   formattedBio: React.ReactNode
 }
 
-export const UserSummary: React.FC<UserSummaryProps> = ({
-  user,
-  contributionData,
-  dateRange,
-  hasContributionData,
-  formattedBio,
-}) => (
-  <div className="mt-4 flex flex-col items-center lg:flex-row">
-    <Image
-      width={200}
-      height={200}
-      className="mr-4 h-[200px] w-[200px] rounded-full border-2 border-white bg-white object-cover shadow-md dark:border-gray-800 dark:bg-gray-600/60"
-      src={user?.avatarUrl || '/placeholder.svg'}
-      alt={user?.name || user?.login || 'User Avatar'}
-    />
-    <div className="w-full overflow-x-auto text-center lg:text-left">
-      <div className="pl-0 lg:pl-4">
-        <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
-          <Link href={user?.url || '#'} className="text-xl font-bold text-blue-400 hover:underline">
-            @{user?.login}
-          </Link>
-          {user?.badges && user.badges.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {user.badges.slice().map((badge: Badge) => (
-                <React.Fragment key={badge.id}>
-                  <Badges
-                    name={badge.name}
-                    cssClass={badge.cssClass || 'medal'}
-                    showTooltip={true}
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          )}
-        </div>
-        <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
-      </div>
-      {hasContributionData && dateRange.startDate && dateRange.endDate && (
-        <div className="w-full lg:block">
-          <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
-            <ContributionHeatmap
-              contributionData={contributionData}
-              startDate={dateRange.startDate}
-              endDate={dateRange.endDate}
-              variant="medium"
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  </div>
+export const UserSummary: React.FC<UserSummaryProps> = ({ user, formattedBio }) => (
+  <MemberDetailSidebar user={user as User} formattedBio={formattedBio} />
 )
 
 const UserDetailsPage: React.FC = () => {
@@ -181,56 +122,52 @@ const UserDetailsPage: React.FC = () => {
     )
   }
 
-  const userDetails = [
-    { label: 'Joined', value: user?.createdAt ? formatDate(user.createdAt) : 'Not available' },
-    { label: 'Email', value: user?.email || 'N/A' },
-    { label: 'Company', value: user?.company || 'N/A' },
-    { label: 'Location', value: user?.location || 'N/A' },
-  ]
-
-  const userStats = [
-    { icon: FaPersonWalkingArrowRight, value: user?.followersCount || 0, unit: 'Follower' },
-    { icon: FaUserPlus, value: user?.followingCount || 0, unit: 'Following' },
-    {
-      icon: FaFolderOpen,
-      pluralizedName: 'Repositories',
-      unit: 'Repository',
-      value: user?.publicRepositoriesCount ?? 0,
-    },
-    { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
-  ]
-
   return (
     <PageWrapper>
-      <Header title={user?.name || user?.login} isActive={true} isArchived={false} />
-
-      <Summary
-        userSummary={
-          <UserSummary
-            user={user}
-            contributionData={contributionData}
-            dateRange={dateRange}
-            hasContributionData={hasContributionData}
-            formattedBio={formattedBio}
-          />
-        }
-      />
-
-      <Metadata details={userDetails} stats={userStats} detailsTitle="User Details" />
-
-      <Contributions hasContributions={false} />
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
+          <aside className="w-full shrink-0 xl:w-[18rem]">
+            <UserSummary user={user} formattedBio={formattedBio} />
+          </aside>
+
+          <div className="flex min-w-0 flex-1 flex-col gap-6">
+            {hasContributionData && dateRange.startDate && dateRange.endDate && (
+              <SecondaryCard className="mb-0!">
+                <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
+                  <ContributionHeatmap
+                    contributionData={contributionData}
+                    startDate={dateRange.startDate}
+                    endDate={dateRange.endDate}
+                    variant="medium"
+                  />
+                </div>
+              </SecondaryCard>
+            )}
 
-      <Contributors />
+            <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+              <RepositoriesModules repositories={topRepositories} />
+            </div>
 
-      <IssuesMilestones
-        recentIssues={issues}
-        recentMilestones={milestones}
-        pullRequests={pullRequests}
-        recentReleases={releases}
-        showAvatar={false}
-      />
+            <div className="grid grow grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                <RecentIssues data={issues} showAvatar={false} />
+              </div>
+              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                <RecentPullRequests data={pullRequests} showAvatar={false} />
+              </div>
+            </div>
 
-      <RepositoriesModules repositories={topRepositories} />
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                <Milestones data={milestones} showAvatar={false} />
+              </div>
+              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                <RecentReleases data={releases} showAvatar={false} showSingleColumn={true} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </PageWrapper>
   )
 }
diff --git a/frontend/src/components/InfoBlock.tsx b/frontend/src/components/InfoBlock.tsx
index 281e9777f1..e50f8f057b 100644
--- a/frontend/src/components/InfoBlock.tsx
+++ b/frontend/src/components/InfoBlock.tsx
@@ -14,7 +14,7 @@ const InfoBlock = ({
   value = 0,
 }: {
   className?: string
-  icon: IconType
+  icon?: IconType
   label?: string
   pluralizedName?: string
   precision?: number
@@ -26,15 +26,12 @@ const InfoBlock = ({
   const tooltipValue = value ? `${value.toLocaleString()} ${name}` : `No ${name}`
 
   return (
-    <div className={`flex ${className}`}>
-      <IconWrapper icon={icon} className="mt-1 mr-3 w-5" />
-      <div>
-        <div className="text-sm md:text-base">
-          {label && <div className="text-sm font-medium">{label}</div>}
-          <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
-            {formattedValue}
-          </Tooltip>
-        </div>
+    <div className={`flex items-center gap-2 ${className}`}>
+      {icon && <IconWrapper icon={icon} className="w-5 text-gray-500" />}
+      <div className="text-base text-gray-600 dark:text-gray-300">
+        <Tooltip content={tooltipValue} delay={100} closeDelay={100} showArrow placement="top">
+          {formattedValue}
+        </Tooltip>
       </div>
     </div>
   )
diff --git a/frontend/src/components/RepositoryCard.tsx b/frontend/src/components/RepositoryCard.tsx
index 03c0b5a661..985ec273b2 100644
--- a/frontend/src/components/RepositoryCard.tsx
+++ b/frontend/src/components/RepositoryCard.tsx
@@ -11,7 +11,7 @@ import StatusBadge from 'components/StatusBadge'
 import { TruncatedText } from 'components/TruncatedText'
 
 const RepositoryCard: React.FC<RepositoryCardListProps> = ({
-  maxInitialDisplay = 4,
+  maxInitialDisplay = 6,
   repositories,
 }) => {
   const [showAllRepositories, setShowAllRepositories] = useState(false)
@@ -25,7 +25,7 @@ const RepositoryCard: React.FC<RepositoryCardListProps> = ({
     : repositories.slice(0, maxInitialDisplay)
   return (
     <div>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
         {displayedRepositories.map((repository) => {
           return (
             <RepositoryItem
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
new file mode 100644
index 0000000000..f140474661
--- /dev/null
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -0,0 +1,100 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
+
+import { User } from 'types/user'
+import { formatDate } from 'utils/dateFormatter'
+import InfoBlock from 'components/InfoBlock'
+
+type Detail = {
+  label: string
+  value: string
+}
+
+type Stat = {
+  icon: typeof FaCodeMerge
+  pluralizedName?: string
+  unit: string
+  value: number
+}
+
+interface MemberDetailSidebarProps {
+  user: User
+  formattedBio: React.ReactNode
+}
+
+const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) => {
+  const details: Detail[] = [
+    { label: 'Joined', value: user.createdAt ? formatDate(user.createdAt) : 'Not available' },
+    { label: 'Email', value: user.email || 'N/A' },
+    { label: 'Company', value: user.company || 'N/A' },
+    { label: 'Location', value: user.location || 'N/A' },
+  ]
+
+  const stats: Stat[] = [
+    { icon: FaPersonWalkingArrowRight, value: user.followersCount || 0, unit: 'Follower' },
+    { icon: FaUserPlus, value: user.followingCount || 0, unit: 'Following' },
+    {
+      icon: FaFolderOpen,
+      pluralizedName: 'Repositories',
+      unit: 'Repository',
+      value: user.publicRepositoriesCount ?? 0,
+    },
+    { icon: FaCodeMerge, value: user.contributionsCount || 0, unit: 'Contribution' },
+  ]
+
+  return (
+    <div className="h-fit space-y-6 md:space-y-8">
+      <div className="flex flex-col items-start text-left">
+        <Image
+          width={200}
+          height={200}
+          className="aspect-square h-auto w-full rounded-full border-2 border-white bg-white object-cover dark:border-gray-800 dark:bg-gray-600/60"
+          src={user.avatarUrl || '/placeholder.svg'}
+          alt={user.name || user.login || 'User Avatar'}
+        />
+        <div className="mt-6 mb-2 w-full overflow-x-auto text-left">
+          <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-100">
+            {user.name || user.login}
+          </h2>
+          <Link
+            href={user.url || '#'}
+            className="text-base text-gray-500 hover:underline dark:text-gray-400"
+          >
+            @{user.login}
+          </Link>
+          <p className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400">{formattedBio}</p>
+        </div>
+      </div>
+
+      <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+        <div className="space-y-4 text-base text-gray-600 dark:text-gray-300">
+          {details.map((detail) => (
+            <div key={detail.label} className="flex items-start gap-1">
+              <strong className="text-gray-800 dark:text-gray-100">{detail.label} : </strong>
+              <span>{detail.value}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+        <div className="space-y-4 text-base text-gray-600 dark:text-gray-300">
+          {stats.map((stat) => (
+            <InfoBlock
+              key={`${stat.unit}-${stat.value}`}
+              icon={stat.icon}
+              label={stat.pluralizedName ?? stat.unit}
+              pluralizedName={stat.pluralizedName}
+              unit={stat.unit}
+              value={stat.value}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MemberDetailSidebar
diff --git a/frontend/src/components/cards/RepositoriesModules.tsx b/frontend/src/components/cards/RepositoriesModules.tsx
index d93bed8d54..9a1c5b7993 100644
--- a/frontend/src/components/cards/RepositoriesModules.tsx
+++ b/frontend/src/components/cards/RepositoriesModules.tsx
@@ -25,7 +25,7 @@ const RepositoriesModules = ({
     <>
       {repositories.length > 0 && (
         <SecondaryCard icon={FaFolderOpen} title={<AnchorTitle title="Repositories" />}>
-          <RepositoryCard maxInitialDisplay={4} repositories={repositories} />
+          <RepositoryCard maxInitialDisplay={6} repositories={repositories} />
         </SecondaryCard>
       )}
       {modules &&

From 3734f7af5a71190e9c81f32ba76c22d19634a31c Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Fri, 29 May 2026 12:00:00 +0530
Subject: [PATCH 02/11] fix: adjust grid classes in ItemCardList,
 RecentReleases, and Release components; remove Closed from Milestones

---
 frontend/src/components/ItemCardList.tsx   | 4 ++--
 frontend/src/components/Milestones.tsx     | 4 ----
 frontend/src/components/RecentReleases.tsx | 2 +-
 frontend/src/components/Release.tsx        | 2 +-
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ItemCardList.tsx b/frontend/src/components/ItemCardList.tsx
index 1bf4a997dc..93a3c58f4c 100644
--- a/frontend/src/components/ItemCardList.tsx
+++ b/frontend/src/components/ItemCardList.tsx
@@ -90,7 +90,7 @@ const ItemCardList = ({
   <SecondaryCard icon={icon} title={title}>
     {data && data.length > 0 ? (
       <div
-        className={`grid ${showSingleColumn ? 'grid-cols-1' : 'gap-4 gap-y-0 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
+        className={`grid gap-4 ${showSingleColumn ? 'grid-cols-1' : 'sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
       >
         {data.map((item, index) => {
           const getItemKey = (i: ItemCardData, idx: number): string => {
@@ -107,7 +107,7 @@ const ItemCardList = ({
           return (
             <div
               key={getItemKey(item, index)}
-              className="mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
+              className="w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
             >
               <div className="flex w-full flex-col justify-between">
                 <div className="flex w-full items-center">
diff --git a/frontend/src/components/Milestones.tsx b/frontend/src/components/Milestones.tsx
index 5d708718f9..0a5d11df1e 100644
--- a/frontend/src/components/Milestones.tsx
+++ b/frontend/src/components/Milestones.tsx
@@ -43,10 +43,6 @@ const Milestones: React.FC<ProjectMilestonesProps> = ({
             <FaCalendar className="mr-2 h-4 w-4" />
             <span>{item.createdAt ? formatDate(item.createdAt) : 'N/A'}</span>
           </div>
-          <div className="mr-4 flex items-center">
-            <FaCircleCheck className="mr-2 h-4 w-4" />
-            <span>{item.closedIssuesCount} closed</span>
-          </div>
           <div className="mr-4 flex items-center">
             <FaCircleExclamation className="mr-2 h-4 w-4" />
             <span>{item.openIssuesCount} open</span>
diff --git a/frontend/src/components/RecentReleases.tsx b/frontend/src/components/RecentReleases.tsx
index d1c02d6aff..e736b6a8e8 100644
--- a/frontend/src/components/RecentReleases.tsx
+++ b/frontend/src/components/RecentReleases.tsx
@@ -27,7 +27,7 @@ const RecentReleases: React.FC<RecentReleasesProps> = ({
     >
       {data && data.length > 0 ? (
         <div
-          className={`grid ${showSingleColumn ? 'grid-cols-1' : 'gap-4 gap-y-0 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
+          className={`grid gap-4 ${showSingleColumn ? 'grid-cols-1' : 'sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'}`}
         >
           {data.map((item) => (
             <Release
diff --git a/frontend/src/components/Release.tsx b/frontend/src/components/Release.tsx
index 935dfd8b50..2c0c34ec0a 100644
--- a/frontend/src/components/Release.tsx
+++ b/frontend/src/components/Release.tsx
@@ -37,7 +37,7 @@ const Release: React.FC<ReleaseProps> = ({
   }
 
   return (
-    <div className={`mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700 ${className}`}>
+    <div className={`w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700 ${className}`}>
       <div className="flex w-full flex-col justify-between">
         <div className="flex w-full items-center">
           {showAvatar && release?.author && (

From 1db0207638f63dfc0468716f0ab4f2838b575ad7 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sat, 30 May 2026 13:09:52 +0530
Subject: [PATCH 03/11] minor fixes

---
 frontend/src/components/ContributionHeatmap.tsx       | 11 +++++++----
 frontend/src/components/cards/MemberDetailSidebar.tsx |  8 +++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ContributionHeatmap.tsx b/frontend/src/components/ContributionHeatmap.tsx
index 95a7e2338c..f798408b8f 100644
--- a/frontend/src/components/ContributionHeatmap.tsx
+++ b/frontend/src/components/ContributionHeatmap.tsx
@@ -316,7 +316,7 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
       )}
 
       {/* scroll wrapper for small screens */}
-      <div className="scrollbar-default w-full overflow-x-auto overflow-y-hidden">
+      <div className="scrollbar-hidden w-full overflow-x-auto overflow-y-hidden">
         <style>
           {`
             .apexcharts-tooltip {
@@ -327,10 +327,13 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
             .apexcharts-tooltip * {
               border: none !important;
             }
-            .scrollbar-default {
-              scrollbar-width: thin;
+            .scrollbar-hidden {
+              scrollbar-width: none;
+              -ms-overflow-style: none;
+            }
+            .scrollbar-hidden::-webkit-scrollbar {
+              display: none;
             }
-
           `}
         </style>
 
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
index f140474661..f347804dfb 100644
--- a/frontend/src/components/cards/MemberDetailSidebar.tsx
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -46,11 +46,11 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
 
   return (
     <div className="h-fit space-y-6 md:space-y-8">
-      <div className="flex flex-col items-start text-left">
+      <div className="flex flex-col items-start gap-0 md:gap-6 text-left">
         <Image
           width={200}
           height={200}
-          className="aspect-square h-auto w-full rounded-full border-2 border-white bg-white object-cover dark:border-gray-800 dark:bg-gray-600/60"
+          className="aspect-square size-32 sm:size-40 xl:h-auto xl:w-full shrink-0 rounded-full border-2 border-white bg-white object-cover dark:border-gray-800 dark:bg-gray-600/60"
           src={user.avatarUrl || '/placeholder.svg'}
           alt={user.name || user.login || 'User Avatar'}
         />
@@ -64,7 +64,9 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
           >
             @{user.login}
           </Link>
-          <p className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400">{formattedBio}</p>
+          <div className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400 wrap-break-word whitespace-pre-wrap">
+            {formattedBio}
+          </div>
         </div>
       </div>
 

From 5dbe44b56ed4cee68b709662f90784ac19a2bdb4 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sat, 30 May 2026 13:15:31 +0530
Subject: [PATCH 04/11] update skeleton

---
 .../skeletons/MemberDetailsPageSkeleton.tsx   | 247 ++++++++----------
 1 file changed, 114 insertions(+), 133 deletions(-)

diff --git a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
index 387b295924..2565bfdcfe 100644
--- a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
+++ b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
@@ -4,158 +4,139 @@ import {
   CardSection,
   PageWrapper,
   SectionHeader,
-  TitleSection,
   TwoColumnSection,
 } from 'components/skeletons/sharedSkeletons'
 
 const MemberDetailsPageSkeleton: React.FC = () => {
   return (
     <PageWrapper>
-      <TitleSection skeletonClassName="h-10 w-64" />
-
-      {/* User Summary Card - bg-gray-100 like SecondaryCard */}
-      <div className="mt-6 mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
-        <div className="mt-4 flex flex-col items-center lg:flex-row">
-          {/* Avatar */}
-          <Skeleton
-            className="mb-4 h-[200px] w-[200px] shrink-0 rounded-full lg:mr-6 lg:mb-0"
-            aria-hidden="true"
-          />
-
-          {/* User Info and Heatmap */}
-          <div className="w-full text-center lg:text-left">
-            <div className="pl-0 lg:pl-4">
-              {/* Username with badge */}
-              <div className="mb-1 flex items-center justify-center gap-3 text-center text-sm lg:justify-start lg:text-left">
-                <Skeleton className="h-6 w-40" aria-hidden="true" />
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-start">
+          {/* Sidebar */}
+          <aside className="w-full shrink-0 xl:w-[18rem]">
+            <div className="h-fit space-y-6 md:space-y-8">
+              <div className="flex flex-col items-start gap-0 md:gap-6 text-left">
+                <Skeleton className="aspect-square size-32 sm:size-40 xl:h-auto xl:w-full shrink-0 rounded-full border-2 border-white bg-white dark:border-gray-800 dark:bg-gray-600/60" />
+                <div className="mt-6 mb-2 w-full overflow-x-auto text-left gap-2 flex flex-col">
+                  <Skeleton className="h-8 w-3/4 rounded-lg" />
+                  <Skeleton className="h-5 w-1/2 rounded-lg" />
+                  <div className="mt-4 space-y-2">
+                    <Skeleton className="h-4 w-full rounded-lg" />
+                    <Skeleton className="h-4 w-5/6 rounded-lg" />
+                    <Skeleton className="h-4 w-4/6 rounded-lg" />
+                  </div>
+                </div>
               </div>
-              {/* Bio */}
-              <Skeleton className="mb-1 h-4 w-full max-w-xl" aria-hidden="true" />
-            </div>
 
-            {/* Heatmap - Only on desktop */}
-            <div className="mt-4 hidden w-full lg:block">
-              <div className="overflow-hidden rounded-lg bg-white dark:bg-gray-800">
-                <Skeleton className="h-32 w-full" aria-hidden="true" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Grid - User Details and Statistics */}
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-7">
-        {/* User Details Card */}
-        <CardSection minHeight="min-h-[210px]" className="gap-2" colSpan="md:col-span-5">
-          <SectionHeader titleSkeletonWidth="w-36" />
-          <div>
-            {[1, 2, 3, 4].map((i) => (
-              <div key={`detail-${i}`} className="pb-1">
-                <div className="flex flex-row gap-1">
-                  <Skeleton className="h-5 w-20" aria-hidden="true" />
-                  <Skeleton className="h-5 w-32" aria-hidden="true" />
+              <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={`detail-${i}`} className="flex items-start gap-2">
+                      <Skeleton className="h-5 w-16 rounded-lg" />
+                      <Skeleton className="h-5 w-24 rounded-lg" />
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-        </CardSection>
 
-        {/* Statistics Card */}
-        <CardSection className="gap-2" colSpan="md:col-span-2">
-          <SectionHeader titleSkeletonWidth="w-24" />
-          <div>
-            {[1, 2, 3, 4].map((i) => (
-              <div key={`stat-${i}`}>
-                <div className="pb-1">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-16" aria-hidden="true" />
-                    <Skeleton className="h-4 w-20" aria-hidden="true" />
-                  </div>
+              <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
+                <div className="space-y-4">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={`stat-${i}`} className="flex items-center gap-3">
+                      <Skeleton className="h-8 w-8 rounded-full" />
+                      <div className="flex flex-col gap-1 w-full">
+                        <Skeleton className="h-4 w-12 rounded-lg" />
+                        <Skeleton className="h-3 w-20 rounded-lg" />
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-        </CardSection>
-      </div>
-
-      {/* Two Column Layout - Issues and Milestones */}
-      <TwoColumnSection
-        sections={[
-          {
-            keyPrefix: 'issue',
-            titleWidth: 'w-32',
-            itemTitleWidth: 'w-4/5',
-            minHeight: 'min-h-[600px]',
-          },
-          {
-            keyPrefix: 'milestone',
-            titleWidth: 'w-40',
-            itemTitleWidth: 'w-4/5',
-            minHeight: 'min-h-[600px]',
-          },
-        ]}
-      />
+            </div>
+          </aside>
 
-      {/* Two Column Layout - Pull Requests and Releases */}
-      <TwoColumnSection
-        sections={[
-          {
-            keyPrefix: 'pr',
-            titleWidth: 'w-48',
-            itemTitleWidth: 'w-3/4',
-            minHeight: 'min-h-[600px]',
-          },
-          {
-            keyPrefix: 'release',
-            titleWidth: 'w-48',
-            itemTitleWidth: 'w-3/4',
-            minHeight: 'min-h-[600px]',
-          },
-        ]}
-      />
+          {/* Main content */}
+          <div className="flex min-w-0 flex-1 flex-col gap-6">
+            {/* Heatmap skeleton */}
+            <div className="overflow-hidden rounded-lg bg-gray-100 p-6 dark:bg-gray-800">
+              <Skeleton className="h-40 w-full rounded-lg" />
+            </div>
 
-      {/* Repositories Section */}
-      <CardSection>
-        <SectionHeader titleSkeletonWidth="w-32" />
-        <div>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-            {[1, 2, 3, 4].map((i) => (
-              <div
-                key={`repo-${i}`}
-                className="flex h-48 w-full flex-col gap-3 rounded-lg border-1 border-gray-200 p-4 shadow-xs ease-in-out hover:shadow-md dark:border-gray-700 dark:bg-gray-800"
-              >
-                <Skeleton className="h-5 w-3/4" aria-hidden="true" />
-                <div className="flex flex-col gap-2 text-sm">
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-12" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-16" aria-hidden="true" />
-                    <Skeleton className="h-4 w-20" aria-hidden="true" />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Skeleton className="h-4 w-4" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                    <Skeleton className="h-4 w-10" aria-hidden="true" />
-                  </div>
+            {/* Repositories Section */}
+            <CardSection className="mb-0! grow">
+              <SectionHeader titleSkeletonWidth="w-32" />
+              <div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                  {[1, 2, 3, 4, 5, 6].map((i) => (
+                    <div
+                      key={`repo-${i}`}
+                      className="flex h-48 w-full flex-col gap-3 rounded-lg border flex-1 border-gray-200 p-4 shadow-xs dark:border-gray-700 dark:bg-gray-800"
+                    >
+                      <Skeleton className="h-5 w-3/4 rounded-lg" aria-hidden="true" />
+                      <div className="flex flex-col gap-2 text-sm mt-2">
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                          <Skeleton className="h-4 w-12 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-16 rounded-lg" aria-hidden="true" />
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
+                          <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
                 </div>
               </div>
-            ))}
-          </div>
-          <div className="mt-4 flex justify-start">
-            <Skeleton className="h-10 w-24 rounded-md" aria-hidden="true" />
+            </CardSection>
+
+            {/* Two Column Layout - Issues and Pull Requests */}
+            <TwoColumnSection
+              sections={[
+                {
+                  keyPrefix: 'issue',
+                  titleWidth: 'w-32',
+                  itemTitleWidth: 'w-4/5',
+                  minHeight: 'min-h-[400px]',
+                },
+                {
+                  keyPrefix: 'pr',
+                  titleWidth: 'w-48',
+                  itemTitleWidth: 'w-3/4',
+                  minHeight: 'min-h-[400px]',
+                },
+              ]}
+            />
+
+            {/* Two Column Layout - Milestones and Releases */}
+            <TwoColumnSection
+              sections={[
+                {
+                  keyPrefix: 'milestone',
+                  titleWidth: 'w-40',
+                  itemTitleWidth: 'w-4/5',
+                  minHeight: 'min-h-[400px]',
+                },
+                {
+                  keyPrefix: 'release',
+                  titleWidth: 'w-48',
+                  itemTitleWidth: 'w-3/4',
+                  minHeight: 'min-h-[400px]',
+                },
+              ]}
+            />
           </div>
         </div>
-      </CardSection>
+      </div>
     </PageWrapper>
   )
 }

From 94a1e98cdea1ec249556e5f2e3834dc96eaa0949 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Sat, 30 May 2026 13:35:06 +0530
Subject: [PATCH 05/11] make check-test

---
 frontend/src/components/InfoBlock.tsx                |  1 -
 frontend/src/components/Milestones.tsx               |  8 +-------
 .../src/components/cards/MemberDetailSidebar.tsx     |  6 +++---
 .../skeletons/MemberDetailsPageSkeleton.tsx          | 12 ++++++------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/InfoBlock.tsx b/frontend/src/components/InfoBlock.tsx
index e50f8f057b..3787d7723d 100644
--- a/frontend/src/components/InfoBlock.tsx
+++ b/frontend/src/components/InfoBlock.tsx
@@ -7,7 +7,6 @@ import { pluralize } from 'utils/pluralize'
 const InfoBlock = ({
   className = '',
   icon,
-  label = '',
   pluralizedName,
   precision = 1,
   unit = '',
diff --git a/frontend/src/components/Milestones.tsx b/frontend/src/components/Milestones.tsx
index 0a5d11df1e..cab31f37e3 100644
--- a/frontend/src/components/Milestones.tsx
+++ b/frontend/src/components/Milestones.tsx
@@ -1,12 +1,6 @@
 import { useRouter } from 'next/navigation'
 import React from 'react'
-import {
-  FaCalendar,
-  FaFolderOpen,
-  FaSignsPost,
-  FaCircleCheck,
-  FaCircleExclamation,
-} from 'react-icons/fa6'
+import { FaCalendar, FaFolderOpen, FaSignsPost, FaCircleExclamation } from 'react-icons/fa6'
 import type { Milestone } from 'types/milestone'
 import { formatDate } from 'utils/dateFormatter'
 import AnchorTitle from 'components/AnchorTitle'
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
index f347804dfb..11c62694de 100644
--- a/frontend/src/components/cards/MemberDetailSidebar.tsx
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -46,11 +46,11 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
 
   return (
     <div className="h-fit space-y-6 md:space-y-8">
-      <div className="flex flex-col items-start gap-0 md:gap-6 text-left">
+      <div className="flex flex-col items-start gap-0 text-left md:gap-6">
         <Image
           width={200}
           height={200}
-          className="aspect-square size-32 sm:size-40 xl:h-auto xl:w-full shrink-0 rounded-full border-2 border-white bg-white object-cover dark:border-gray-800 dark:bg-gray-600/60"
+          className="aspect-square size-32 shrink-0 rounded-full border-2 border-white bg-white object-cover sm:size-40 xl:h-auto xl:w-full dark:border-gray-800 dark:bg-gray-600/60"
           src={user.avatarUrl || '/placeholder.svg'}
           alt={user.name || user.login || 'User Avatar'}
         />
@@ -64,7 +64,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
           >
             @{user.login}
           </Link>
-          <div className="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400 wrap-break-word whitespace-pre-wrap">
+          <div className="mt-4 text-base leading-relaxed wrap-break-word whitespace-pre-wrap text-gray-600 dark:text-gray-400">
             {formattedBio}
           </div>
         </div>
diff --git a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
index 2565bfdcfe..a1c6ce924f 100644
--- a/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
+++ b/frontend/src/components/skeletons/MemberDetailsPageSkeleton.tsx
@@ -15,9 +15,9 @@ const MemberDetailsPageSkeleton: React.FC = () => {
           {/* Sidebar */}
           <aside className="w-full shrink-0 xl:w-[18rem]">
             <div className="h-fit space-y-6 md:space-y-8">
-              <div className="flex flex-col items-start gap-0 md:gap-6 text-left">
-                <Skeleton className="aspect-square size-32 sm:size-40 xl:h-auto xl:w-full shrink-0 rounded-full border-2 border-white bg-white dark:border-gray-800 dark:bg-gray-600/60" />
-                <div className="mt-6 mb-2 w-full overflow-x-auto text-left gap-2 flex flex-col">
+              <div className="flex flex-col items-start gap-0 text-left md:gap-6">
+                <Skeleton className="aspect-square size-32 shrink-0 rounded-full border-2 border-white bg-white sm:size-40 xl:h-auto xl:w-full dark:border-gray-800 dark:bg-gray-600/60" />
+                <div className="mt-6 mb-2 flex w-full flex-col gap-2 overflow-x-auto text-left">
                   <Skeleton className="h-8 w-3/4 rounded-lg" />
                   <Skeleton className="h-5 w-1/2 rounded-lg" />
                   <div className="mt-4 space-y-2">
@@ -44,7 +44,7 @@ const MemberDetailsPageSkeleton: React.FC = () => {
                   {[1, 2, 3, 4].map((i) => (
                     <div key={`stat-${i}`} className="flex items-center gap-3">
                       <Skeleton className="h-8 w-8 rounded-full" />
-                      <div className="flex flex-col gap-1 w-full">
+                      <div className="flex w-full flex-col gap-1">
                         <Skeleton className="h-4 w-12 rounded-lg" />
                         <Skeleton className="h-3 w-20 rounded-lg" />
                       </div>
@@ -70,10 +70,10 @@ const MemberDetailsPageSkeleton: React.FC = () => {
                   {[1, 2, 3, 4, 5, 6].map((i) => (
                     <div
                       key={`repo-${i}`}
-                      className="flex h-48 w-full flex-col gap-3 rounded-lg border flex-1 border-gray-200 p-4 shadow-xs dark:border-gray-700 dark:bg-gray-800"
+                      className="flex h-48 w-full flex-1 flex-col gap-3 rounded-lg border border-gray-200 p-4 shadow-xs dark:border-gray-700 dark:bg-gray-800"
                     >
                       <Skeleton className="h-5 w-3/4 rounded-lg" aria-hidden="true" />
-                      <div className="flex flex-col gap-2 text-sm mt-2">
+                      <div className="mt-2 flex flex-col gap-2 text-sm">
                         <div className="flex items-center gap-2">
                           <Skeleton className="h-4 w-4 rounded-full" aria-hidden="true" />
                           <Skeleton className="h-4 w-10 rounded-lg" aria-hidden="true" />

From 45a03789fc4388684407a7020b384097df3a400a Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 16:36:53 +0530
Subject: [PATCH 06/11] Resolved Code Rabbit Comment

---
 frontend/__tests__/unit/pages/UserDetails.test.tsx | 13 -------------
 frontend/src/app/members/[memberKey]/page.tsx      |  4 ++--
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index 154dbd1f77..b7642e596e 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -128,19 +128,6 @@ describe('UserSummary', () => {
     expect(screen.getByRole('img', { name: 'nologin' })).toBeInTheDocument()
   })
 
-  test('uses placeholder avatar and fallback alt when user is null', () => {
-    render(
-      <UserSummary
-        user={null}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
-        formattedBio={null}
-      />
-    )
-    const img = screen.getByRole('img', { name: 'User Avatar' })
-    expect(img).toHaveAttribute('src', expect.stringContaining('placeholder.svg'))
-  })
 
   test('renders badges when user has badges', () => {
     const user = {
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index c8e593fce3..b70e36be60 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -19,12 +19,12 @@ import SecondaryCard from 'components/SecondaryCard'
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
 interface UserSummaryProps {
-  user: User | null
+  user: User
   formattedBio: React.ReactNode
 }
 
 export const UserSummary: React.FC<UserSummaryProps> = ({ user, formattedBio }) => (
-  <MemberDetailSidebar user={user as User} formattedBio={formattedBio} />
+  <MemberDetailSidebar user={user} formattedBio={formattedBio} />
 )
 
 const UserDetailsPage: React.FC = () => {

From 7896bcd7c2149250ff78aa87c95e04e3c340978b Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 17:51:31 +0530
Subject: [PATCH 07/11] refactor: replace SecondaryCard with custom container
 and improve ContributionHeatmap responsiveness and scaling

---
 frontend/src/app/members/[memberKey]/page.tsx |  8 +++---
 .../src/components/ContributionHeatmap.tsx    | 28 ++++++++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index b70e36be60..b3c5c15d4b 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -15,7 +15,7 @@ import Milestones from 'components/Milestones'
 import RecentIssues from 'components/RecentIssues'
 import RecentPullRequests from 'components/RecentPullRequests'
 import RecentReleases from 'components/RecentReleases'
-import SecondaryCard from 'components/SecondaryCard'
+
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
 interface UserSummaryProps {
@@ -132,8 +132,8 @@ const UserDetailsPage: React.FC = () => {
 
           <div className="flex min-w-0 flex-1 flex-col gap-6">
             {hasContributionData && dateRange.startDate && dateRange.endDate && (
-              <SecondaryCard className="mb-0!">
-                <div className="overflow-x-auto rounded-lg bg-gray-100 dark:bg-gray-800">
+              <div className='rounded-lg bg-gray-100 pl-1 pr-4 pt-0 pb-1 shadow-md dark:bg-gray-800'>
+                <div className="overflow-x-auto">
                   <ContributionHeatmap
                     contributionData={contributionData}
                     startDate={dateRange.startDate}
@@ -141,7 +141,7 @@ const UserDetailsPage: React.FC = () => {
                     variant="medium"
                   />
                 </div>
-              </SecondaryCard>
+              </div>
             )}
 
             <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
diff --git a/frontend/src/components/ContributionHeatmap.tsx b/frontend/src/components/ContributionHeatmap.tsx
index f798408b8f..a0f5d11fce 100644
--- a/frontend/src/components/ContributionHeatmap.tsx
+++ b/frontend/src/components/ContributionHeatmap.tsx
@@ -276,27 +276,29 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
     [contributionData, startDate, endDate]
   )
 
+
+
   const options = useMemo(() => getChartOptions(isDarkMode, unit), [isDarkMode, unit])
 
   const calculateChartWidth = useMemo(() => {
     const weeksCount = heatmapSeries[0]?.data?.length || 0
 
     if (variant === 'compact') {
-      const pixelPerWeek = 13.4
-      const padding = 40
+      const pixelPerWeek = 14
+      const padding = 60
       const calculatedWidth = weeksCount * pixelPerWeek + padding
       return Math.max(400, calculatedWidth)
     }
 
     if (variant === 'medium') {
-      const pixelPerWeek = 16
-      const padding = 45
+      const pixelPerWeek = 17
+      const padding = 70
       const calculatedWidth = weeksCount * pixelPerWeek + padding
       return Math.max(500, calculatedWidth)
     }
 
-    const pixelPerWeek = 19.5
-    const padding = 50
+    const pixelPerWeek = 20
+    const padding = 80
     const calculatedWidth = weeksCount * pixelPerWeek + padding
     return Math.max(600, calculatedWidth)
   }, [heatmapSeries, variant])
@@ -337,7 +339,7 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
           `}
         </style>
 
-        <div className="inline-block">
+        <div className="mx-auto w-max px-2 md:hidden">
           <Chart
             height={getChartHeight()}
             options={options}
@@ -346,6 +348,18 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
             width={chartWidth}
           />
         </div>
+        <div
+          className="hidden w-full px-2 md:block"
+          style={{ aspectRatio: `${chartWidth} / ${getChartHeight()}` }}
+        >
+          <Chart
+            height="100%"
+            options={options}
+            series={heatmapSeries}
+            type="heatmap"
+            width="100%"
+          />
+        </div>
       </div>
     </div>
   )

From 1b2ef8ec7a426075c7372a9d8b8d91d52f236043 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 18:29:03 +0530
Subject: [PATCH 08/11] refactor: update MemberDetailSidebar layout to support
 responsive multi-column design with conditional styling

---
 .../src/components/cards/MemberDetailSidebar.tsx     | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
index 11c62694de..17997887af 100644
--- a/frontend/src/components/cards/MemberDetailSidebar.tsx
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -45,8 +45,8 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
   ]
 
   return (
-    <div className="h-fit space-y-6 md:space-y-8">
-      <div className="flex flex-col items-start gap-0 text-left md:gap-6">
+    <div className="h-fit flex flex-col sm:flex-row xl:flex-col gap-6 sm:gap-8">
+      <div className="flex min-w-0 flex-col items-start gap-0 text-left sm:flex-1 xl:flex-col xl:items-start">
         <Image
           width={200}
           height={200}
@@ -70,8 +70,8 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
         </div>
       </div>
 
-      <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
-        <div className="space-y-4 text-base text-gray-600 dark:text-gray-300">
+      <div className="flex flex-col gap-0 sm:w-72 sm:shrink-0 sm:gap-6 xl:w-full xl:gap-0">
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 dark:border-gray-700 dark:text-gray-300 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md sm:dark:bg-gray-800 xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none xl:dark:bg-transparent">
           {details.map((detail) => (
             <div key={detail.label} className="flex items-start gap-1">
               <strong className="text-gray-800 dark:text-gray-100">{detail.label} : </strong>
@@ -79,10 +79,8 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
             </div>
           ))}
         </div>
-      </div>
 
-      <div className="space-y-3 border-t border-gray-200 py-5 dark:border-gray-700">
-        <div className="space-y-4 text-base text-gray-600 dark:text-gray-300">
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 dark:border-gray-700 dark:text-gray-300 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md sm:dark:bg-gray-800 xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none xl:dark:bg-transparent">
           {stats.map((stat) => (
             <InfoBlock
               key={`${stat.unit}-${stat.value}`}

From 3996fed9ac22be9721dfea892c6feeeb5074a921 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 18:51:58 +0530
Subject: [PATCH 09/11] feat: conditionally render member profile sections and
 bio to improve UI layout consistency

---
 frontend/src/app/members/[memberKey]/page.tsx | 41 +++++++++++--------
 .../components/cards/MemberDetailSidebar.tsx  | 12 +++---
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index b3c5c15d4b..0e18487a42 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -144,26 +144,33 @@ const UserDetailsPage: React.FC = () => {
               </div>
             )}
 
-            <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
-              <RepositoriesModules repositories={topRepositories} />
-            </div>
-
-            <div className="grid grow grid-cols-1 gap-6 md:grid-cols-2">
-              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
-                <RecentIssues data={issues} showAvatar={false} />
-              </div>
+            {topRepositories.length > 0 && (
               <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
-                <RecentPullRequests data={pullRequests} showAvatar={false} />
+                <RepositoriesModules repositories={topRepositories} />
               </div>
-            </div>
+            )}
 
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
-                <Milestones data={milestones} showAvatar={false} />
-              </div>
-              <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
-                <RecentReleases data={releases} showAvatar={false} showSingleColumn={true} />
-              </div>
+            <div className="grid grow grid-cols-1 gap-6 md:grid-cols-2">
+              {issues.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentIssues data={issues} showAvatar={false} />
+                </div>
+              )}
+              {pullRequests.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentPullRequests data={pullRequests} showAvatar={false} />
+                </div>
+              )}
+              {milestones.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <Milestones data={milestones} showAvatar={false} />
+                </div>
+              )}
+              {releases.length > 0 && (
+                <div className="flex flex-col [&>div]:mb-0! [&>div]:grow">
+                  <RecentReleases data={releases} showAvatar={false} showSingleColumn={true} />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
index 17997887af..1be5520a42 100644
--- a/frontend/src/components/cards/MemberDetailSidebar.tsx
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -45,7 +45,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
   ]
 
   return (
-    <div className="h-fit flex flex-col sm:flex-row xl:flex-col gap-6 sm:gap-8">
+    <div className="h-fit flex flex-col sm:flex-row xl:flex-col gap-6 sm:gap-8 xl:gap-5">
       <div className="flex min-w-0 flex-col items-start gap-0 text-left sm:flex-1 xl:flex-col xl:items-start">
         <Image
           width={200}
@@ -54,7 +54,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
           src={user.avatarUrl || '/placeholder.svg'}
           alt={user.name || user.login || 'User Avatar'}
         />
-        <div className="mt-6 mb-2 w-full overflow-x-auto text-left">
+        <div className="mt-6 w-full overflow-x-auto text-left">
           <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-100">
             {user.name || user.login}
           </h2>
@@ -64,9 +64,11 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
           >
             @{user.login}
           </Link>
-          <div className="mt-4 text-base leading-relaxed wrap-break-word whitespace-pre-wrap text-gray-600 dark:text-gray-400">
-            {formattedBio}
-          </div>
+          {user.bio && (
+            <div className="mt-4 text-base leading-relaxed wrap-break-word whitespace-pre-wrap text-gray-600 dark:text-gray-400">
+              {formattedBio}
+            </div>
+          )}
         </div>
       </div>
 

From 92c66cde339f923c7201da963938c5a56535c140 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 19:38:58 +0530
Subject: [PATCH 10/11] refactor: update unit and a11y tests to reflect UI
 component changes

---
 .../ContributionHeatmap.a11y.test.tsx         |   2 +-
 .../components/RepositoryCard.a11y.test.tsx   |   2 +-
 .../components/ContributionHeatmap.test.tsx   | 133 +++----
 .../unit/components/InfoBlock.test.tsx        |  63 +--
 .../unit/components/Milestones.test.tsx       |   6 -
 .../unit/components/RecentRelease.test.tsx    |   4 -
 .../unit/components/RepositoryCard.test.tsx   |  50 +--
 frontend/__tests__/unit/pages/Home.test.tsx   |   1 -
 .../unit/pages/OrganizationDetails.test.tsx   |   1 -
 .../unit/pages/ProjectDetails.test.tsx        |   1 -
 .../unit/pages/RepositoryDetails.test.tsx     |   1 -
 .../__tests__/unit/pages/UserDetails.test.tsx | 368 +-----------------
 12 files changed, 96 insertions(+), 536 deletions(-)

diff --git a/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx b/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
index 2ee9d3adec..84620e7d00 100644
--- a/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx
@@ -78,7 +78,7 @@ describe.each([
   it('should not have any accessibility violations', async () => {
     const { container } = render(<ContributionHeatmap {...defaultProps} />)
 
-    await screen.findByTestId('mock-heatmap-chart')
+    await screen.findAllByTestId('mock-heatmap-chart')
 
     const results = await axe(container)
 
diff --git a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
index 427e07caaa..238051e381 100644
--- a/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
+++ b/frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx
@@ -47,7 +47,7 @@ describe.each([
   })
 
   it('should not have any accessibility violations when expanded', async () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+    const repositories = Array.from({ length: 7 }, (_, i) => createMockRepository(i))
     const { container } = render(<RepositoryCard repositories={repositories} />)
 
     const showMoreButton = screen.getByRole('button', { name: /show more/i })
diff --git a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
index 7a55210905..98690752d1 100644
--- a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
+++ b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
@@ -85,7 +85,7 @@ describe('ContributionHeatmap', () => {
   describe('Rendering & Props', () => {
     it('renders with minimal and all optional props', async () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument())
+      await waitFor(() => expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument())
       expect(screen.queryByRole('heading')).not.toBeInTheDocument()
 
       rerender(
@@ -99,16 +99,16 @@ describe('ContributionHeatmap', () => {
     it('renders all 7 day series and correct chart type', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
       ;['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach((day) =>
-        expect(screen.getByTestId(`series-${day}`)).toBeInTheDocument()
+        expect(screen.getAllByTestId(`series-${day}`)[0]).toBeInTheDocument()
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-type', 'heatmap')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-type', 'heatmap')
     })
 
     it('applies custom unit and handles undefined title', () => {
       renderWithTheme(
         <ContributionHeatmap {...defaultProps} unit="pull request" title={undefined} />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       expect(screen.queryByRole('heading')).not.toBeInTheDocument()
     })
   })
@@ -124,7 +124,7 @@ describe('ContributionHeatmap', () => {
         const { unmount } = renderWithTheme(
           <ContributionHeatmap {...defaultProps} contributionData={data} />
         )
-        expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
         unmount()
       })
     })
@@ -139,7 +139,7 @@ describe('ContributionHeatmap', () => {
         const { unmount } = renderWithTheme(
           <ContributionHeatmap contributionData={data} startDate={start} endDate={end} />
         )
-        expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
         unmount()
       })
     })
@@ -151,7 +151,7 @@ describe('ContributionHeatmap', () => {
         endDate: '2024-01-31',
       }
       renderWithTheme(<ContributionHeatmap {...props} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles large datasets (365 days)', () => {
@@ -168,29 +168,29 @@ describe('ContributionHeatmap', () => {
           endDate="2024-12-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles missing startDate by using default dates', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={mockData} startDate="" endDate="2024-01-31" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       // Should render with default date range (1 year)
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
     })
 
     it('handles missing endDate by using default dates', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={mockData} startDate="2024-01-01" endDate="" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
     })
 
     it('handles both missing startDate and endDate', () => {
       renderWithTheme(<ContributionHeatmap contributionData={mockData} startDate="" endDate="" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles invalid startDate by using default dates', () => {
@@ -201,7 +201,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles invalid endDate by using default dates', () => {
@@ -212,7 +212,7 @@ describe('ContributionHeatmap', () => {
           endDate="not-a-date"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles both invalid startDate and endDate', () => {
@@ -223,7 +223,7 @@ describe('ContributionHeatmap', () => {
           endDate="also-garbage"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles swapped dates (startDate > endDate) by swapping them', () => {
@@ -234,8 +234,8 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-01"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
     })
 
     it('handles startDate after endDate and swaps them correctly', () => {
@@ -246,7 +246,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-02-01" endDate="2024-01-01" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -299,7 +299,7 @@ describe('ContributionHeatmap', () => {
   describe('Chart Configuration & Performance', () => {
     it('sets correct dimensions and series count', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       expect(chart).toHaveAttribute('data-height', '195')
       expect(chart).toHaveAttribute('data-series-length', '7')
     })
@@ -316,24 +316,24 @@ describe('ContributionHeatmap', () => {
           <ContributionHeatmap {...newProps} />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles dynamic import with SSR disabled', async () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument())
+      await waitFor(() => expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument())
     })
   })
 
   describe('Tooltip Behavior', () => {
     it('generates correct tooltip with date formatting', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles singular and plural unit labels in tooltip', () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} unit="commit" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       const singleData = { '2024-01-01': 1 }
       rerender(
@@ -346,26 +346,26 @@ describe('ContributionHeatmap', () => {
           />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('tooltip respects theme colors', () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} />, 'light')
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       ;(useTheme as jest.Mock).mockReturnValue({ theme: 'dark', setTheme: jest.fn() })
       rerender(
         <ThemeProvider attribute="class">
           <ContributionHeatmap {...defaultProps} />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles missing data in tooltip gracefully', () => {
       const { container } = renderWithTheme(
         <ContributionHeatmap contributionData={{}} startDate="2024-01-01" endDate="2024-01-31" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       const styleTag = container.querySelector('style')
       expect(styleTag).toBeInTheDocument()
@@ -381,7 +381,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-01-01" endDate="2024-01-14" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles week transitions correctly', () => {
@@ -392,7 +392,7 @@ describe('ContributionHeatmap', () => {
       renderWithTheme(
         <ContributionHeatmap contributionData={data} startDate="2024-01-07" endDate="2024-01-14" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -412,7 +412,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles boundary values in color ranges', () => {
@@ -434,7 +434,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -452,7 +452,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-03-01"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles year boundaries correctly', () => {
@@ -469,7 +469,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-02"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles dates in reverse chronological order in data object', () => {
@@ -486,7 +486,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -503,7 +503,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles floating point contribution values', () => {
@@ -518,7 +518,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles extremely large contribution counts', () => {
@@ -533,7 +533,7 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -554,14 +554,14 @@ describe('ContributionHeatmap', () => {
         )
       }
 
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles unmounting and remounting', () => {
       const { unmount } = renderWithTheme(<ContributionHeatmap {...defaultProps} />)
       unmount()
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -578,38 +578,38 @@ describe('ContributionHeatmap', () => {
           endDate="2024-01-31"
         />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('handles custom unit strings with special characters', () => {
       const { unmount } = renderWithTheme(
         <ContributionHeatmap {...defaultProps} unit="pull-request" />
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       unmount()
 
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} unit="PR's" />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
 
       rerender(
         <ThemeProvider attribute="class">
           <ContributionHeatmap {...defaultProps} unit="contribution/day" />
         </ThemeProvider>
       )
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
   describe('Chart Options Validation', () => {
     it('configures chart with correct options structure', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       expect(chart).toHaveAttribute('data-type', 'heatmap')
     })
 
     it('renders heatmap chart', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
@@ -654,9 +654,9 @@ describe('ContributionHeatmap', () => {
       )
 
       expect(screen.getByText('GitHub Contributions')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       ;['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach((day) =>
-        expect(screen.getByTestId(`series-${day}`)).toBeInTheDocument()
+        expect(screen.getAllByTestId(`series-${day}`)[0]).toBeInTheDocument()
       )
     })
 
@@ -671,7 +671,7 @@ describe('ContributionHeatmap', () => {
       )
 
       expect(screen.getByText('No Activity')).toBeInTheDocument()
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
 
     it('renders correctly with all edge cases combined', () => {
@@ -692,62 +692,37 @@ describe('ContributionHeatmap', () => {
         />
       )
 
-      expect(screen.getByTestId('mock-heatmap-chart')).toBeInTheDocument()
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
     })
   })
 
   describe('Variants', () => {
     it('renders default variant with full dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="default" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify full-size dimensions (195px height for default variant)
       expect(chart).toHaveAttribute('data-height', '195')
     })
 
     it('renders medium variant with medium dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="medium" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify medium dimensions (172px height for medium variant)
       expect(chart).toHaveAttribute('data-height', '172')
     })
 
     it('renders compact variant with smaller dimensions', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} variant="compact" />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Verify compact dimensions (150px height for compact variant)
       expect(chart).toHaveAttribute('data-height', '150')
     })
 
-    it('applies compact-specific container styling when variant is compact', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Compact" variant="compact" />
-      )
-      // Verify compact variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
-
-    it('applies default variant container styling when variant is default', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Default" variant="default" />
-      )
-      // Verify default variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
 
-    it('applies medium variant container styling', () => {
-      const { container } = renderWithTheme(
-        <ContributionHeatmap {...defaultProps} title="Medium" variant="medium" />
-      )
-      // Verify medium variant uses inline-block class
-      const chartContainer = container.querySelector('.inline-block')
-      expect(chartContainer).toBeInTheDocument()
-    })
 
     it('defaults to default variant when no variant is specified', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      const chart = screen.getByTestId('mock-heatmap-chart')
+      const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
       // Should render with default variant dimensions
       expect(chart).toHaveAttribute('data-height', '195')
     })
diff --git a/frontend/__tests__/unit/components/InfoBlock.test.tsx b/frontend/__tests__/unit/components/InfoBlock.test.tsx
index 7186e0b326..bc9b8dcb59 100644
--- a/frontend/__tests__/unit/components/InfoBlock.test.tsx
+++ b/frontend/__tests__/unit/components/InfoBlock.test.tsx
@@ -73,37 +73,16 @@ describe('InfoBlock Component', () => {
             unit="contributor"
             pluralizedName="contributors"
             precision={2}
-            label="Team Members"
             className="custom-class"
           />
         )
 
         expect(screen.getByTestId('icon-star')).toBeInTheDocument()
-        expect(screen.getByText('Team Members')).toBeInTheDocument()
         expect(screen.getByText('1.5k contributors')).toBeInTheDocument()
       })
     })
 
     describe('Conditional rendering logic', () => {
-      it('should show label when provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} label="Active Projects" />)
-
-        expect(screen.getByText('Active Projects')).toBeInTheDocument()
-        expect(screen.getByText('Active Projects')).toHaveClass('text-sm', 'font-medium')
-      })
-
-      it('should not show label when not provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} />)
-
-        expect(screen.queryByText('Active Projects')).not.toBeInTheDocument()
-      })
-
       it('should show "No" prefix when value is 0', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
@@ -233,20 +212,6 @@ describe('InfoBlock Component', () => {
     })
 
     describe('Default values and fallbacks', () => {
-      it('should not render a label element when label prop is not provided', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} />)
-
-        // Verify only the formatted value is rendered, no label
-        expect(screen.getByText('100 items')).toBeInTheDocument()
-
-        // Verify no element with label styling exists
-        const labelElements = document.querySelectorAll('.text-sm.font-medium')
-        expect(labelElements).toHaveLength(0)
-      })
-
       it('should use empty string as default className', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
@@ -286,16 +251,6 @@ describe('InfoBlock Component', () => {
         expect(screen.getByText('2.5k stars')).toBeInTheDocument()
       })
 
-      it('should render label with correct styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('repos')
-
-        render(<InfoBlock icon={FaCode} value={100} label="Repositories" />)
-
-        const label = screen.getByText('Repositories')
-        expect(label).toHaveClass('text-sm', 'font-medium')
-      })
-
       it('should render tooltip content correctly for positive values', () => {
         mockMillify.mockReturnValue('1.5k')
         mockPluralize.mockReturnValue('contributors')
@@ -379,10 +334,10 @@ describe('InfoBlock Component', () => {
         expect(wrapper).toHaveClass('flex')
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
 
         const contentDiv = wrapper.children[1] as HTMLElement
-        expect(contentDiv.children[0]).toHaveClass('text-sm', 'md:text-base')
+        expect(contentDiv).toHaveClass('text-base', 'text-gray-600')
       })
 
       it('should apply custom className correctly', () => {
@@ -404,21 +359,9 @@ describe('InfoBlock Component', () => {
         render(<InfoBlock icon={FaUser} value={100} />)
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
       })
 
-      it('should have correct text container styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} label="Test Label" />)
-
-        const textContainer = screen.getByText('100 items').closest('div')
-        expect(textContainer).toHaveClass('text-sm', 'md:text-base')
-
-        const label = screen.getByText('Test Label')
-        expect(label).toHaveClass('text-sm', 'font-medium')
-      })
     })
 
     describe('Accessibility and tooltip behavior', () => {
diff --git a/frontend/__tests__/unit/components/Milestones.test.tsx b/frontend/__tests__/unit/components/Milestones.test.tsx
index 0dfd45001e..8b3d990105 100644
--- a/frontend/__tests__/unit/components/Milestones.test.tsx
+++ b/frontend/__tests__/unit/components/Milestones.test.tsx
@@ -193,7 +193,6 @@ describe('Milestones', () => {
     render(<Milestones data={[milestone]} />)
 
     expect(screen.getByText('Jan 1, 2023')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
     expect(screen.getByText('5 open')).toBeInTheDocument()
     expect(screen.getByTestId('truncated-text')).toHaveTextContent('awesome-repo')
   })
@@ -246,9 +245,6 @@ describe('Milestones', () => {
     expect(screen.getByTestId('milestone-0')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-1')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-2')).toBeInTheDocument()
-    expect(screen.getByText('5 closed')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
-    expect(screen.getByText('15 closed')).toBeInTheDocument()
   })
 
   it('handles edge case with zero counts', () => {
@@ -256,7 +252,6 @@ describe('Milestones', () => {
       <Milestones data={[createMockMilestone({ closedIssuesCount: 0, openIssuesCount: 0 })]} />
     )
 
-    expect(screen.getByText('0 closed')).toBeInTheDocument()
     expect(screen.getByText('0 open')).toBeInTheDocument()
   })
 
@@ -265,7 +260,6 @@ describe('Milestones', () => {
       <Milestones data={[createMockMilestone({ closedIssuesCount: 999, openIssuesCount: 1000 })]} />
     )
 
-    expect(screen.getByText('999 closed')).toBeInTheDocument()
     expect(screen.getByText('1000 open')).toBeInTheDocument()
   })
 
diff --git a/frontend/__tests__/unit/components/RecentRelease.test.tsx b/frontend/__tests__/unit/components/RecentRelease.test.tsx
index a7e04d76a2..8b17abbef5 100644
--- a/frontend/__tests__/unit/components/RecentRelease.test.tsx
+++ b/frontend/__tests__/unit/components/RecentRelease.test.tsx
@@ -382,10 +382,6 @@ describe('RecentReleases Component', () => {
     })
 
     // Check for main card structure - look for the card wrapper
-    const cardElement = container.querySelector(
-      String.raw`.mb-4.w-full.rounded-lg.bg-gray-200.p-4.dark\:bg-gray-700`
-    )
-    expect(cardElement).toBeInTheDocument()
 
     // Check for proper grid layout
     const gridElement = container.querySelector('.grid')
diff --git a/frontend/__tests__/unit/components/RepositoryCard.test.tsx b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
index a46b483cad..c3e943604f 100644
--- a/frontend/__tests__/unit/components/RepositoryCard.test.tsx
+++ b/frontend/__tests__/unit/components/RepositoryCard.test.tsx
@@ -82,65 +82,67 @@ describe('RepositoryCard', () => {
     expect(container.querySelector('.grid')).toBeNull()
   })
 
-  it('shows first 4 repositories initially when there are more than 4', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('shows first 6 repositories initially when there are more than 6', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.getByText('Repository 3')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
-  it('shows all repositories when there are 4 or fewer', () => {
-    const repositories = Array.from({ length: 3 }, (_, i) => createMockRepository(i))
+  it('shows all repositories when there are 6 or fewer', () => {
+    const repositories = Array.from({ length: 5 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
     expect(screen.getByText('Repository 1')).toBeInTheDocument()
     expect(screen.getByText('Repository 2')).toBeInTheDocument()
+    expect(screen.getByText('Repository 3')).toBeInTheDocument()
+    expect(screen.getByText('Repository 4')).toBeInTheDocument()
   })
 
-  it('displays ShowMoreButton when there are more than 4 repositories', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('displays ShowMoreButton when there are more than 6 repositories', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByRole('button', { name: /Show/ })).toBeInTheDocument()
   })
 
-  it('does not display ShowMoreButton when there are 4 or fewer repositories', () => {
-    const repositories = Array.from({ length: 4 }, (_, i) => createMockRepository(i))
+  it('does not display ShowMoreButton when there are 6 or fewer repositories', () => {
+    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.queryByRole('button', { name: /Show/ })).not.toBeInTheDocument()
   })
 
-  it('toggles between showing 4 and all repositories when clicked', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('toggles between showing 6 and all repositories when clicked', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
-    // Initially shows first 4
+    // Initially shows first 6
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
 
     // Click show more
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
     // Now shows all repositories
-    expect(screen.getByText('Repository 4')).toBeInTheDocument()
-    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.getByText('Repository 6')).toBeInTheDocument()
+    expect(screen.getByText('Repository 7')).toBeInTheDocument()
 
     // Click show less
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-    // Back to showing first 4
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    // Back to showing first 6
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
   it('renders repository items with correct information', () => {
@@ -311,22 +313,22 @@ describe('RepositoryCard', () => {
     })
 
     it('archived badge persists when toggling show more/less', () => {
-      const repositories = Array.from({ length: 6 }, (_, i) => ({
+      const repositories = Array.from({ length: 8 }, (_, i) => ({
         ...createMockRepository(i),
         isArchived: i % 2 === 0,
       }))
 
       render(<RepositoryCard repositories={repositories} />)
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(3)
+      expect(screen.getAllByText('Archived')).toHaveLength(4)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
     })
 
     it('clicking archived repository still navigates correctly', () => {
diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx
index 0f0d3e9232..06960c6331 100644
--- a/frontend/__tests__/unit/pages/Home.test.tsx
+++ b/frontend/__tests__/unit/pages/Home.test.tsx
@@ -213,7 +213,6 @@ describe('Home', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
index 70f832992a..c851c3e850 100644
--- a/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/OrganizationDetails.test.tsx
@@ -118,7 +118,6 @@ describe('OrganizationDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
index 4afd72e511..7753332299 100644
--- a/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/ProjectDetails.test.tsx
@@ -260,7 +260,6 @@ describe('ProjectDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
index c28c160b8f..db71bb4397 100644
--- a/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/RepositoryDetails.test.tsx
@@ -188,7 +188,6 @@ describe('RepositoryDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index b7642e596e..e0f432e2f6 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -12,31 +12,7 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-// Mock Badges component
-jest.mock('components/Badges', () => {
-  const MockBadges = ({
-    name,
-    cssClass,
-    showTooltip,
-  }: {
-    name: string
-    cssClass: string
-    showTooltip?: boolean
-  }) => (
-    <div
-      data-testid={`badge-${name.toLowerCase().replaceAll(/\s+/g, '-')}`}
-      data-css-class={cssClass}
-      data-show-tooltip={showTooltip}
-    >
-      <span data-testid={`icon-${cssClass.replace('fa-', '')}`} />
-    </div>
-  )
-  MockBadges.displayName = 'MockBadges'
-  return {
-    __esModule: true,
-    default: MockBadges,
-  }
-})
+
 
 const mockRouter = {
   push: jest.fn(),
@@ -72,13 +48,11 @@ describe('UserSummary', () => {
       name: 'John Doe',
       avatarUrl: 'https://example.com/avatar.png',
       url: 'https://github.com/johndoe',
+      bio: 'Bio text',
     }
     render(
       <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
+        user={user as any}
         formattedBio={<span>Bio text</span>}
       />
     )
@@ -90,25 +64,6 @@ describe('UserSummary', () => {
     expect(screen.getByText('Bio text')).toBeInTheDocument()
   })
 
-  test('renders contribution heatmap when hasContributionData is true', () => {
-    const user = {
-      login: 'jane',
-      name: 'Jane',
-      avatarUrl: '/avatar.png',
-      url: 'https://github.com/jane',
-    }
-    render(
-      <UserSummary
-        user={user}
-        contributionData={{ '2025-01-01': 1 }}
-        dateRange={{ startDate: '2025-01-01', endDate: '2025-01-01' }}
-        hasContributionData={true}
-        formattedBio={null}
-      />
-    )
-    expect(screen.getByTestId('contribution-heatmap')).toBeInTheDocument()
-  })
-
   test('uses login as avatar alt when user has no name', () => {
     const user = {
       login: 'nologin',
@@ -118,10 +73,7 @@ describe('UserSummary', () => {
     }
     render(
       <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
+        user={user as any}
         formattedBio={null}
       />
     )
@@ -129,25 +81,6 @@ describe('UserSummary', () => {
   })
 
 
-  test('renders badges when user has badges', () => {
-    const user = {
-      login: 'badged',
-      name: 'Badged User',
-      avatarUrl: '/a.png',
-      url: 'https://github.com/badged',
-      badges: [{ id: 'b1', name: 'Star', cssClass: 'fa-star', description: 'Star', weight: 1 }],
-    }
-    render(
-      <UserSummary
-        user={user}
-        contributionData={{}}
-        dateRange={{ startDate: '', endDate: '' }}
-        hasContributionData={false}
-        formattedBio={null}
-      />
-    )
-    expect(screen.getByTestId('badge-star')).toBeInTheDocument()
-  })
 })
 
 describe('UserDetailsPage', () => {
@@ -209,7 +142,6 @@ describe('UserDetailsPage', () => {
       expect(screen.getByText('Test User')).toBeInTheDocument()
     })
 
-    expect(screen.getByText('Statistics')).toBeInTheDocument()
     expect(screen.getByText('Test Company')).toBeInTheDocument()
     expect(screen.getByText('Test Location')).toBeInTheDocument()
     expect(screen.getByText('10 Followers')).toBeInTheDocument()
@@ -292,7 +224,6 @@ describe('UserDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })
@@ -331,9 +262,6 @@ describe('UserDetailsPage', () => {
     render(<UserDetailsPage />)
 
     await waitFor(() => {
-      const statisticsTitle = screen.getByText('Statistics')
-      expect(statisticsTitle).toBeInTheDocument()
-
       const followersCount = screen.getByText('10 Followers')
       expect(followersCount).toBeInTheDocument()
 
@@ -400,13 +328,11 @@ describe('UserDetailsPage', () => {
       expect(userName).toBeInTheDocument()
       const avatar = screen.getByAltText('Test User')
       expect(avatar).toHaveClass('rounded-full')
-      expect(avatar).toHaveClass('h-[200px]')
-      expect(avatar).toHaveClass('w-[200px]')
+      expect(avatar).toHaveClass('size-32')
 
       // Check for responsive classes
       const summaryContainer = avatar.closest('div.flex')
       expect(summaryContainer).toHaveClass('flex-col')
-      expect(summaryContainer).toHaveClass('lg:flex-row')
     })
   })
 
@@ -503,8 +429,7 @@ describe('UserDetailsPage', () => {
 
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Issues')).toBeInTheDocument()
-      expect(screen.getByText('No recent releases.')).toBeInTheDocument()
+      expect(screen.queryByText('Recent Issues')).not.toBeInTheDocument()
     })
   })
 
@@ -521,8 +446,7 @@ describe('UserDetailsPage', () => {
 
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Pull Requests')).toBeInTheDocument()
-      expect(screen.queryByText('Test Pull Request')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Pull Requests')).not.toBeInTheDocument()
     })
   })
 
@@ -538,8 +462,7 @@ describe('UserDetailsPage', () => {
     })
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Releases')).toBeInTheDocument()
-      expect(screen.queryByText('Test v1.0.0')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Releases')).not.toBeInTheDocument()
     })
   })
 
@@ -555,8 +478,7 @@ describe('UserDetailsPage', () => {
     })
     render(<UserDetailsPage />)
     await waitFor(() => {
-      expect(screen.getByText('Recent Milestones')).toBeInTheDocument()
-      expect(screen.queryByText('v2.0.0 Release')).not.toBeInTheDocument()
+      expect(screen.queryByText('Recent Milestones')).not.toBeInTheDocument()
     })
   })
 
@@ -606,8 +528,7 @@ describe('UserDetailsPage', () => {
     await waitFor(() => {
       expect(screen.getAllByText('N/A').length).toBe(3)
       const bioContainer = screen.getByText('@testuser').closest('div')
-      expect(bioContainer).toHaveClass('text-center')
-      expect(bioContainer).toHaveClass('lg:text-left')
+      expect(bioContainer).toHaveClass('text-left')
     })
   })
 
@@ -622,273 +543,6 @@ describe('UserDetailsPage', () => {
     })
   })
 
-  describe('Badge Display Tests', () => {
-    test('renders badges section when user has badges', async () => {
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: mockUserDetailsData,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.getByTestId('badge-contributor')).toBeInTheDocument()
-        expect(screen.getByTestId('badge-security-expert')).toBeInTheDocument()
-      })
-    })
-
-    test('renders badges with correct props', async () => {
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: mockUserDetailsData,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const contributorBadge = screen.getByTestId('badge-contributor')
-        expect(contributorBadge).toHaveAttribute('data-css-class', 'fa-medal')
-        expect(contributorBadge).toHaveAttribute('data-show-tooltip', 'true')
-
-        const securityBadge = screen.getByTestId('badge-security-expert')
-        expect(securityBadge).toHaveAttribute('data-css-class', 'fa-shield-alt')
-        expect(securityBadge).toHaveAttribute('data-show-tooltip', 'true')
-      })
-    })
-
-    test('does not render badges section when user has no badges', async () => {
-      const dataWithoutBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [],
-          badgeCount: 0,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithoutBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument()
-      })
-    })
-
-    test('does not render badges section when badges is undefined', async () => {
-      const dataWithoutBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: undefined,
-          badgeCount: 0,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithoutBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument()
-      })
-    })
-
-    test('renders badges with fallback cssClass when not provided', async () => {
-      const dataWithIncompleteBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Test Badge',
-              cssClass: undefined,
-              description: 'Test description',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithIncompleteBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'medal')
-      })
-    })
-
-    test('renders badges with empty cssClass fallback', async () => {
-      const dataWithEmptyCssClass = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Test Badge',
-              cssClass: '',
-              description: 'Test description',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithEmptyCssClass,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        const badge = screen.getByTestId('badge-test-badge')
-        expect(badge).toHaveAttribute('data-css-class', 'medal')
-      })
-    })
-
-    test('handles badges with special characters in names', async () => {
-      const dataWithSpecialBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Badge & More!',
-              cssClass: 'fa-star',
-              description: 'Special badge',
-              weight: 1,
-            },
-          ],
-        },
-      }
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithSpecialBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(screen.getByTestId('badge-badge-&-more!')).toBeInTheDocument()
-      })
-    })
-
-    test('handles badges with long names', async () => {
-      const dataWithLongNameBadge = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            {
-              id: '1',
-              name: 'Very Long Badge Name That Exceeds Normal Length',
-              cssClass: 'fa-trophy',
-              description: 'Long name badge',
-              weight: 1,
-            },
-          ],
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithLongNameBadge,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        expect(
-          screen.getByTestId('badge-very-long-badge-name-that-exceeds-normal-length')
-        ).toBeInTheDocument()
-      })
-    })
-
-    // eslint-disable-next-line jest/expect-expect
-    test('renders badges in correct order as returned by backend (weight ASC then name ASC)', async () => {
-      // Backend returns badges sorted by weight ASC, then name ASC
-      // This test verifies the frontend preserves the backend ordering
-      const dataWithOrderedBadges = {
-        ...mockUserDetailsData,
-        user: {
-          ...mockUserDetailsData.user,
-          badges: [
-            // Backend returns badges in this order: weight ASC, then name ASC
-            {
-              id: '3',
-              name: 'Alpha Badge',
-              cssClass: 'fa-star',
-              description: 'Alpha badge with weight 1',
-              weight: 1,
-            },
-            {
-              id: '4',
-              name: 'Beta Badge',
-              cssClass: 'fa-trophy',
-              description: 'Beta badge with weight 1',
-              weight: 1,
-            },
-            {
-              id: '1',
-              name: 'Contributor',
-              cssClass: 'medal',
-              description: 'Active contributor',
-              weight: 1,
-            },
-            {
-              id: '2',
-              name: 'Security Expert',
-              cssClass: 'fa-shield-alt',
-              description: 'Security expertise',
-              weight: 2,
-            },
-            {
-              id: '5',
-              name: 'Top Contributor',
-              cssClass: 'fa-crown',
-              description: 'Highest weight badge',
-              weight: 3,
-            },
-          ],
-          badgeCount: 5,
-        },
-      }
-
-      ;(useQuery as unknown as jest.Mock).mockReturnValue({
-        data: dataWithOrderedBadges,
-        loading: false,
-        error: null,
-      })
-
-      render(<UserDetailsPage />)
-      await waitFor(() => {
-        // Expected order matches backend contract: weight ASC (1, 1, 1, 2, 3), then name ASC for equal weights
-        const expectedOrder = [
-          'badge-alpha-badge', // weight 1, name ASC
-          'badge-beta-badge', // weight 1, name ASC
-          'badge-contributor', // weight 1, name ASC
-          'badge-security-expert', // weight 2
-          'badge-top-contributor', // weight 3
-        ]
-        expectBadgesInCorrectOrder(expectedOrder)
-      })
-    })
-  })
 
   describe('Contribution Heatmap', () => {
     test('does not render heatmap when user has empty contribution data', async () => {
@@ -1108,7 +762,7 @@ describe('UserDetailsPage', () => {
       render(<UserDetailsPage />)
 
       await waitFor(() => {
-        expect(screen.getByText('Joined:')).toBeInTheDocument()
+        expect(screen.getByText('Joined :')).toBeInTheDocument()
         expect(screen.getByText('Not available')).toBeInTheDocument()
       })
     })

From b2b2c40d95025478e964316f112bd6b1fd917772 Mon Sep 17 00:00:00 2001
From: Saurabh-2607 <saurabh.nayla@gmail.com>
Date: Mon, 15 Jun 2026 20:00:25 +0530
Subject: [PATCH 11/11] refactor: update UI layout styles, improve test code
 quality, and clean up unused imports

---
 .../components/ContributionHeatmap.test.tsx   | 25 ++++++++++++-----
 .../unit/components/InfoBlock.test.tsx        |  3 +--
 .../__tests__/unit/pages/UserDetails.test.tsx | 27 ++-----------------
 frontend/src/app/members/[memberKey]/page.tsx |  2 +-
 .../src/components/ContributionHeatmap.tsx    |  2 --
 .../components/cards/MemberDetailSidebar.tsx  |  6 ++---
 6 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
index 98690752d1..8eebc45794 100644
--- a/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
+++ b/frontend/__tests__/unit/components/ContributionHeatmap.test.tsx
@@ -85,7 +85,9 @@ describe('ContributionHeatmap', () => {
   describe('Rendering & Props', () => {
     it('renders with minimal and all optional props', async () => {
       const { rerender } = renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument())
+      await waitFor(() =>
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      )
       expect(screen.queryByRole('heading')).not.toBeInTheDocument()
 
       rerender(
@@ -177,7 +179,10 @@ describe('ContributionHeatmap', () => {
       )
       expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
       // Should render with default date range (1 year)
-      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles missing endDate by using default dates', () => {
@@ -185,7 +190,10 @@ describe('ContributionHeatmap', () => {
         <ContributionHeatmap contributionData={mockData} startDate="2024-01-01" endDate="" />
       )
       expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
-      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles both missing startDate and endDate', () => {
@@ -235,7 +243,10 @@ describe('ContributionHeatmap', () => {
         />
       )
       expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
-      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute('data-series-length', '7')
+      expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toHaveAttribute(
+        'data-series-length',
+        '7'
+      )
     })
 
     it('handles startDate after endDate and swaps them correctly', () => {
@@ -321,7 +332,9 @@ describe('ContributionHeatmap', () => {
 
     it('handles dynamic import with SSR disabled', async () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
-      await waitFor(() => expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument())
+      await waitFor(() =>
+        expect(screen.getAllByTestId('mock-heatmap-chart')[0]).toBeInTheDocument()
+      )
     })
   })
 
@@ -718,8 +731,6 @@ describe('ContributionHeatmap', () => {
       expect(chart).toHaveAttribute('data-height', '150')
     })
 
-
-
     it('defaults to default variant when no variant is specified', () => {
       renderWithTheme(<ContributionHeatmap {...defaultProps} />)
       const chart = screen.getAllByTestId('mock-heatmap-chart')[0]
diff --git a/frontend/__tests__/unit/components/InfoBlock.test.tsx b/frontend/__tests__/unit/components/InfoBlock.test.tsx
index bc9b8dcb59..f2baacfeac 100644
--- a/frontend/__tests__/unit/components/InfoBlock.test.tsx
+++ b/frontend/__tests__/unit/components/InfoBlock.test.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import millify from 'millify'
 import React from 'react'
-import { FaUser, FaStar, FaCode } from 'react-icons/fa6'
+import { FaUser, FaStar } from 'react-icons/fa6'
 import { pluralize } from 'utils/pluralize'
 import InfoBlock from 'components/InfoBlock'
 
@@ -361,7 +361,6 @@ describe('InfoBlock Component', () => {
         const icon = screen.getByTestId('icon-user')
         expect(icon).toHaveClass('w-5', 'text-gray-500')
       })
-
     })
 
     describe('Accessibility and tooltip behavior', () => {
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index e0f432e2f6..4ce7410edf 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -12,8 +12,6 @@ jest.mock('@apollo/client/react', () => ({
   useQuery: jest.fn(),
 }))
 
-
-
 const mockRouter = {
   push: jest.fn(),
 }
@@ -52,7 +50,7 @@ describe('UserSummary', () => {
     }
     render(
       <UserSummary
-        user={user as any}
+        user={user as Parameters<typeof UserSummary>[0]['user']}
         formattedBio={<span>Bio text</span>}
       />
     )
@@ -72,15 +70,10 @@ describe('UserSummary', () => {
       url: 'https://github.com/nologin',
     }
     render(
-      <UserSummary
-        user={user as any}
-        formattedBio={null}
-      />
+      <UserSummary user={user as Parameters<typeof UserSummary>[0]['user']} formattedBio={null} />
     )
     expect(screen.getByRole('img', { name: 'nologin' })).toBeInTheDocument()
   })
-
-
 })
 
 describe('UserDetailsPage', () => {
@@ -96,21 +89,6 @@ describe('UserDetailsPage', () => {
     jest.clearAllMocks()
   })
 
-  // Helper functions to reduce nesting depth
-  const getBadgeElements = () => {
-    return screen.getAllByTestId(/^badge-/)
-  }
-
-  const getBadgeTestIds = () => {
-    const badgeElements = getBadgeElements()
-    return badgeElements.map((element) => element.dataset.testid)
-  }
-
-  const expectBadgesInCorrectOrder = (expectedOrder: string[]) => {
-    const badgeTestIds = getBadgeTestIds()
-    expect(badgeTestIds).toEqual(expectedOrder)
-  }
-
   test('renders loading state', async () => {
     ;(useQuery as unknown as jest.Mock).mockReturnValue({
       data: null,
@@ -543,7 +521,6 @@ describe('UserDetailsPage', () => {
     })
   })
 
-
   describe('Contribution Heatmap', () => {
     test('does not render heatmap when user has empty contribution data', async () => {
       const dataWithEmptyContributions = {
diff --git a/frontend/src/app/members/[memberKey]/page.tsx b/frontend/src/app/members/[memberKey]/page.tsx
index 0e18487a42..8981c9e863 100644
--- a/frontend/src/app/members/[memberKey]/page.tsx
+++ b/frontend/src/app/members/[memberKey]/page.tsx
@@ -132,7 +132,7 @@ const UserDetailsPage: React.FC = () => {
 
           <div className="flex min-w-0 flex-1 flex-col gap-6">
             {hasContributionData && dateRange.startDate && dateRange.endDate && (
-              <div className='rounded-lg bg-gray-100 pl-1 pr-4 pt-0 pb-1 shadow-md dark:bg-gray-800'>
+              <div className="rounded-lg bg-gray-100 pt-0 pr-4 pb-1 pl-1 shadow-md dark:bg-gray-800">
                 <div className="overflow-x-auto">
                   <ContributionHeatmap
                     contributionData={contributionData}
diff --git a/frontend/src/components/ContributionHeatmap.tsx b/frontend/src/components/ContributionHeatmap.tsx
index a0f5d11fce..9ff859d089 100644
--- a/frontend/src/components/ContributionHeatmap.tsx
+++ b/frontend/src/components/ContributionHeatmap.tsx
@@ -276,8 +276,6 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
     [contributionData, startDate, endDate]
   )
 
-
-
   const options = useMemo(() => getChartOptions(isDarkMode, unit), [isDarkMode, unit])
 
   const calculateChartWidth = useMemo(() => {
diff --git a/frontend/src/components/cards/MemberDetailSidebar.tsx b/frontend/src/components/cards/MemberDetailSidebar.tsx
index 1be5520a42..f934efb588 100644
--- a/frontend/src/components/cards/MemberDetailSidebar.tsx
+++ b/frontend/src/components/cards/MemberDetailSidebar.tsx
@@ -45,7 +45,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
   ]
 
   return (
-    <div className="h-fit flex flex-col sm:flex-row xl:flex-col gap-6 sm:gap-8 xl:gap-5">
+    <div className="flex h-fit flex-col gap-6 sm:flex-row sm:gap-8 xl:flex-col xl:gap-5">
       <div className="flex min-w-0 flex-col items-start gap-0 text-left sm:flex-1 xl:flex-col xl:items-start">
         <Image
           width={200}
@@ -73,7 +73,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
       </div>
 
       <div className="flex flex-col gap-0 sm:w-72 sm:shrink-0 sm:gap-6 xl:w-full xl:gap-0">
-        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 dark:border-gray-700 dark:text-gray-300 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md sm:dark:bg-gray-800 xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none xl:dark:bg-transparent">
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none dark:border-gray-700 dark:text-gray-300 sm:dark:bg-gray-800 xl:dark:bg-transparent">
           {details.map((detail) => (
             <div key={detail.label} className="flex items-start gap-1">
               <strong className="text-gray-800 dark:text-gray-100">{detail.label} : </strong>
@@ -82,7 +82,7 @@ const MemberDetailSidebar = ({ user, formattedBio }: MemberDetailSidebarProps) =
           ))}
         </div>
 
-        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 dark:border-gray-700 dark:text-gray-300 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md sm:dark:bg-gray-800 xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none xl:dark:bg-transparent">
+        <div className="space-y-4 border-t border-gray-200 py-5 text-base text-gray-600 sm:rounded-lg sm:border-t-0 sm:bg-gray-100 sm:p-6 sm:shadow-md xl:rounded-none xl:border-t xl:bg-transparent xl:px-0 xl:py-5 xl:shadow-none dark:border-gray-700 dark:text-gray-300 sm:dark:bg-gray-800 xl:dark:bg-transparent">
           {stats.map((stat) => (
             <InfoBlock
               key={`${stat.unit}-${stat.value}`}