From 6b008af49991051d419d8de195120960750f36e1 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Fri, 23 Jan 2026 14:18:02 +0530
Subject: [PATCH 1/2] Make the page responsive

---
 frontend/src/app/projects/dashboard/layout.tsx         |  2 +-
 .../projects/dashboard/metrics/[projectKey]/page.tsx   | 10 ++++++----
 frontend/src/components/GeneralCompliantComponent.tsx  |  4 ++--
 frontend/src/components/MetricsScoreCircle.tsx         |  8 ++++----
 frontend/src/components/ProjectsDashboardNavBar.tsx    |  4 ++--
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/projects/dashboard/layout.tsx b/frontend/src/app/projects/dashboard/layout.tsx
index 475e61f2a4..51978c9fa9 100644
--- a/frontend/src/app/projects/dashboard/layout.tsx
+++ b/frontend/src/app/projects/dashboard/layout.tsx
@@ -14,7 +14,7 @@ const ProjectsHealthDashboardLayout: React.FC<{ readonly children: React.ReactNo
   return (
     <FontLoaderWrapper>
       <DashboardWrapper>
-        <div className="flex flex-col md:flex-row">
+        <div className="flex flex-col lg:flex-row">
           <ProjectsDashboardNavBar />
           <main className="flex-1 p-4">{children}</main>
         </div>
diff --git a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
index 06004602ec..3cc63bd7f6 100644
--- a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
@@ -62,15 +62,17 @@ const ProjectHealthMetricsDetails: FC = () => {
     <div className="flex flex-col gap-4">
       {metricsList && metricsLatest ? (
         <>
-          <div className="flex items-center justify-between">
-            <div className="flex justify-start">
-              <h1 className="text-2xl font-bold">{metricsLatest.projectName}</h1>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h1 className="max-w-[70vw] text-lg font-bold sm:max-w-none sm:text-2xl">
+                {metricsLatest.projectName}
+              </h1>
               <MetricsPDFButton
                 path={`${projectKey}/pdf`}
                 fileName={`${projectKey}-health-metrics`}
               />
             </div>
-            <div className="flex items-center gap-2">
+            <div className="flex gap-2 overflow-x-auto pb-1 sm:w-auto sm:w-full sm:overflow-visible">
               <MetricsScoreCircle score={metricsLatest.score} clickable={false} />
               <GeneralCompliantComponent
                 title={
diff --git a/frontend/src/components/GeneralCompliantComponent.tsx b/frontend/src/components/GeneralCompliantComponent.tsx
index 2d87386319..c070da72f8 100644
--- a/frontend/src/components/GeneralCompliantComponent.tsx
+++ b/frontend/src/components/GeneralCompliantComponent.tsx
@@ -15,14 +15,14 @@ const GeneralCompliantComponent: FC<{
     <Tooltip content={title} placement="top">
       <div
         className={clsx(
-          'group relative flex h-14 w-14 cursor-default items-center justify-center rounded-full shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg',
+          'group relative flex h-10 w-10 cursor-default items-center justify-center rounded-full shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg sm:h-14 sm:w-14',
           {
             'bg-green-400/80 text-green-900/90': compliant,
             'bg-red-400/80 text-red-900/90': !compliant,
           }
         )}
       >
-        <IconWrapper icon={icon} className="h-7 w-7" />
+        <IconWrapper icon={icon} className="h-5 w-5 sm:h-7 sm:w-7" />
       </div>
     </Tooltip>
   )
diff --git a/frontend/src/components/MetricsScoreCircle.tsx b/frontend/src/components/MetricsScoreCircle.tsx
index b47d6f5b26..ecfd9aee11 100644
--- a/frontend/src/components/MetricsScoreCircle.tsx
+++ b/frontend/src/components/MetricsScoreCircle.tsx
@@ -21,7 +21,7 @@ const MetricsScoreCircle: FC<MetricsScoreCircleProps> = ({ score, onClick, click
     }
   }
 
-  const baseClasses = `relative flex h-14 w-14 flex-col items-center justify-center rounded-full shadow-md transition-all duration-300 ${scoreStyle}`
+  const baseClasses = `relative flex h-10 w-10 sm:h-14 sm:w-14 flex-col items-center justify-center rounded-full shadow-md transition-all duration-300 ${scoreStyle}`
   const groupClass = clickable ? 'group' : ''
   const clickableClasses = clickable ? 'hover:scale-105 hover:shadow-lg cursor-pointer' : ''
   const finalClasses = `${groupClass} ${baseClasses} ${clickableClasses}`
@@ -51,11 +51,11 @@ const MetricsScoreCircle: FC<MetricsScoreCircleProps> = ({ score, onClick, click
           <div className="absolute inset-0 rounded-full bg-linear-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
         )}
         <div className="relative z-10 flex flex-col items-center text-center">
-          <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+          <span className="text-[0.375rem] font-medium tracking-wide uppercase opacity-60 sm:text-[0.5rem]">
             Health
           </span>
-          <span className="text-xl leading-none font-extrabold">{score}</span>
-          <span className="text-[0.5rem] font-medium tracking-wide uppercase opacity-60">
+          <span className="text-lg leading-none font-extrabold sm:text-xl">{score}</span>
+          <span className="text-[0.375rem] font-medium tracking-wide uppercase opacity-60 sm:text-[0.5rem]">
             Score
           </span>
         </div>
diff --git a/frontend/src/components/ProjectsDashboardNavBar.tsx b/frontend/src/components/ProjectsDashboardNavBar.tsx
index 012d30cf7c..13e45f52f6 100644
--- a/frontend/src/components/ProjectsDashboardNavBar.tsx
+++ b/frontend/src/components/ProjectsDashboardNavBar.tsx
@@ -26,7 +26,7 @@ const ProjectsDashboardNavBar: React.FC = () => {
   return (
     <Navbar
       classNames={{
-        base: 'flex md:w-64 md:flex-col flex-row items-start justify-start py-4',
+        base: 'flex lg:w-64 lg:flex-col flex-row items-start justify-start py-4',
         item: [
           'data-[active=true]:bg-gray-200',
           'dark:data-[active=true]:bg-gray-800',
@@ -37,7 +37,7 @@ const ProjectsDashboardNavBar: React.FC = () => {
       }}
       position="static"
     >
-      <NavbarContent className="flex h-full justify-center md:flex-col md:items-start">
+      <NavbarContent className="flex h-full justify-center lg:flex-col lg:items-start">
         {NAVIGATION_ITEMS.map(({ href, label, icon }) => (
           <NavbarItem key={href} isActive={isActive(href)}>
             <Link

From 8bcfb94fc495fad9131ea971150af58d51f6e434 Mon Sep 17 00:00:00 2001
From: Anurag Yadav <anuragyadav2787@gmail.com>
Date: Fri, 23 Jan 2026 15:31:05 +0530
Subject: [PATCH 2/2] fixed responsivenes in medium screen

---
 .../app/projects/dashboard/metrics/[projectKey]/page.tsx  | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
index 3cc63bd7f6..3f12991efc 100644
--- a/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
+++ b/frontend/src/app/projects/dashboard/metrics/[projectKey]/page.tsx
@@ -63,16 +63,14 @@ const ProjectHealthMetricsDetails: FC = () => {
       {metricsList && metricsLatest ? (
         <>
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex min-w-0 flex-wrap items-center gap-2">
-              <h1 className="max-w-[70vw] text-lg font-bold sm:max-w-none sm:text-2xl">
-                {metricsLatest.projectName}
-              </h1>
+            <div className="flex justify-start">
+              <h1 className="text-lg font-bold sm:text-2xl">{metricsLatest.projectName}</h1>
               <MetricsPDFButton
                 path={`${projectKey}/pdf`}
                 fileName={`${projectKey}-health-metrics`}
               />
             </div>
-            <div className="flex gap-2 overflow-x-auto pb-1 sm:w-auto sm:w-full sm:overflow-visible">
+            <div className="flex items-center gap-2">
               <MetricsScoreCircle score={metricsLatest.score} clickable={false} />
               <GeneralCompliantComponent
                 title={