dashboard responsivity

commonknowledge · Dec 21, 2024 · 503645c · 503645c
1 parent d0aab50
commit 503645c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx b/nextjs/src/app/reports/[id]/(components)/ReportSidebarLeft.tsx
@@ -18,7 +18,7 @@ export const TabTriggerClasses = {
   tabsList:
     'w-full justify-start text-white rounded-none px-4 border border-b-meepGray-800 pt-4 pb-0 h-fit flex gap-4',
   tabsTrigger:
-    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
+    'pb-2 bg-transparent px-0 data-[state=active]:bg-transparent text-meepGray-200 data-[state=active]:text-white data-[state=active]:border-b border-white rounded-none',
 }
 
 export function ReportSidebarLeft() {

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboard.tsx
@@ -86,7 +86,7 @@ export default function ReportDashboard() {
   }
 
   return (
-    <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto">
+    <main className="flex flex-col gap-4 w-full  h-[calc(100vh-48px)] overflow-y-auto z-30">
       <Tabs defaultValue="overview" className="col-span-4">
         <TabsList className={TabTriggerClasses.tabsList}>
           {dashboardTabItems.map((item) => (
@@ -104,7 +104,7 @@ export default function ReportDashboard() {
         </TabsList>
         <div className="p-4">
           <TabsContent value="overview">
-            <div className="grid sm:grid-cols-2 md:grid-cols-2 grid-cols-1 gap-4 w-full">
+            <div className="flex flex-wrap gap-4 w-full">
               {constituencies && !selectedBoundary && (
                 <>
                   <ReportDashboardMemberCount constituencies={constituencies} />

diff --git a/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx b/nextjs/src/app/reports/[id]/dashboard/ReportDashboardList.tsx
@@ -41,8 +41,11 @@ export default function ReportDashboardList({
       <CardHeader>
         <CardTitle>Key Constituencies</CardTitle>
       </CardHeader>
-      <CardContent className="h-[400px] overflow-y-auto">
-        <ChartContainer config={chartConfig} className={`h-[1000px] w-full`}>
+      <CardContent className="max-h-[400px] max-w-[600px] overflow-y-auto">
+        <ChartContainer
+          config={chartConfig}
+          className={`h-[500px] w-full overflow-y-auto`}
+        >
           <BarChart
             accessibilityLayer
             data={chartData}

diff --git a/nextjs/src/components/ChartCard.tsx b/nextjs/src/components/ChartCard.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      'rounded-lg border bg-card text-card-foreground shadow-sm flex-1 min-w-[300px]',
       className
     )}
     {...props}