From f4d7e654336ebafd6d427eb6f7c0528946d91788 Mon Sep 17 00:00:00 2001
From: Abhishekfm <abhisheksingh.fm@gmail.com>
Date: Wed, 14 Oct 2026 13:42:24 +0530
Subject: [PATCH 1/2] Enhance UI and layout for dashboard components

- Updated the DatasetPage to improve layout and added border radius to the DataTable for better aesthetics.
- Modified DashboardNav to adjust height constraints and improve responsiveness.
- Refined BreadCrumbs component to enhance sticky positioning and responsiveness across different screen sizes.
---
 .../dashboard/[entityType]/[entitySlug]/dataset/page.tsx    | 5 ++++-
 app/[locale]/dashboard/components/dashboard-nav.tsx         | 6 +++---
 components/BreadCrumbs/index.tsx                            | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
index c6ec1498..79987a40 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
@@ -350,12 +350,15 @@ export default function DatasetPage() {
 
   return (
     <>
-      <div className={`mt-8 flex h-full flex-col ${styles.listing}`}>
+      <div className={`flex h-full flex-col lg:mt-2 ${styles.listing}`}>
         <DataTable
           columnContentTypes={[...columnContentTypes]}
           columns={datasetColumns}
           rows={rows}
           hideSelection
+          style={{
+            borderRadius: '20px',
+          }}
           withServer
           title="Datasets"
           subtitle="Discover, create and manage datasets on CivicDataSpace."
diff --git a/app/[locale]/dashboard/components/dashboard-nav.tsx b/app/[locale]/dashboard/components/dashboard-nav.tsx
index bf586d09..cff3e74e 100644
--- a/app/[locale]/dashboard/components/dashboard-nav.tsx
+++ b/app/[locale]/dashboard/components/dashboard-nav.tsx
@@ -90,7 +90,7 @@ export function DashboardNav({
   return (
     <aside
       className={cn(
-        'mb-10 mt-2 hidden h-fit min-w-0 shrink-0 flex-col self-start overflow-hidden rounded-4 border-1 border-solid border-baseGraySlateSolid6 bg-surfaceDefault md:sticky md:top-[calc(80px+1rem)] md:z-1 md:flex',
+        'mt-2 hidden max-h-[calc(100dvh-120px-2rem)] min-h-0 min-w-0 shrink-0 flex-col self-start overflow-hidden rounded-4 border-1 border-solid border-baseGraySlateSolid6 bg-surfaceDefault md:sticky md:top-[calc(120px+2rem)] md:z-1 md:flex',
         isCollapsed ? 'w-[72px]' : 'w-[220px]',
         styles.Collapse
       )}
@@ -98,7 +98,7 @@ export function DashboardNav({
       {type === 'organization' || type === 'self' ? (
         <div
           className={cn(
-            'flex items-center gap-3 border-b-1 border-solid border-baseGraySlateSolid6 px-4 py-4',
+            'flex shrink-0 items-center gap-3 border-b-1 border-solid border-baseGraySlateSolid6 px-4 py-4',
             isCollapsed && 'justify-center px-2'
           )}
         >
@@ -147,7 +147,7 @@ export function DashboardNav({
         </div>
       ) : null}
 
-      <nav className="flex flex-col gap-4 px-2 py-2">
+      <nav className="flex min-h-0 flex-1 flex-col gap-4 px-2 py-2">
         {groupNames.map((groupName, groupIndex) => (
           <div key={groupName} className="flex flex-col gap-1">
             {showGroupLabels ? (
diff --git a/components/BreadCrumbs/index.tsx b/components/BreadCrumbs/index.tsx
index 13a1ef4f..feae386d 100644
--- a/components/BreadCrumbs/index.tsx
+++ b/components/BreadCrumbs/index.tsx
@@ -14,7 +14,7 @@ interface BreadCrumbsProps {
 
 const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ data }) => {
   return (
-    <div className="border-b sticky top-[70px] z-2 bg-secondaryOrange px-6 py-2 lg:top-[86px] ">
+    <div className="sticky top-[83px] z-2 border-b bg-secondaryOrange px-6 py-2 sm:top-[99px] md:top-[80px] lg:top-[92px]">
       <Breadcrumb className="mx-1">
         <BreadcrumbList className="">
           {data.map((item, index) => (

From 636d97bbbc9c0652f6b8a5e0495db7cb3f377b81 Mon Sep 17 00:00:00 2001
From: Abhishekfm <abhisheksingh.fm@gmail.com>
Date: Wed, 14 Oct 2026 13:44:36 +0530
Subject: [PATCH 2/2] Update DatasetPage layout for improved responsiveness

- Adjusted margin classes in the DatasetPage component to enhance layout on medium-sized screens.
- This change aims to improve the overall user experience by ensuring better spacing and alignment across different device sizes.
---
 .../dashboard/[entityType]/[entitySlug]/dataset/page.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
index 79987a40..22fa19ba 100644
--- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
+++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/page.tsx
@@ -350,7 +350,7 @@ export default function DatasetPage() {
 
   return (
     <>
-      <div className={`flex h-full flex-col lg:mt-2 ${styles.listing}`}>
+      <div className={`flex h-full flex-col md:mt-5 lg:mt-2 ${styles.listing}`}>
         <DataTable
           columnContentTypes={[...columnContentTypes]}
           columns={datasetColumns}