From 2ab3964a8170932123a570e6032e67acc2fdf90d Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Thu, 14 Nov 2024 19:08:46 +0700
Subject: [PATCH] feat: update layout and responsiveness of Dashboard,
 DataTable, and Modal components for improved user experience

---
 src/app/dashboard/page.tsx   | 4 ++--
 src/components/dataTable.tsx | 2 +-
 src/components/modal.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 15a639a..7bed7a5 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -263,11 +263,11 @@ export default function Dashboard() {
                       </CardContent>
                     </Tabs>
                   </Card>
-                  <Card className="col-span-3  w-full">
+                  <Card className="col-span-4 md:col-span-3">
                     <CardHeader>
                       <CardTitle>Recent Funds</CardTitle>
                     </CardHeader>
-                    <CardContent className="grid grid-flow-dense">
+                    <CardContent className="grid grid-flow-dense w-full">
                       <RecentFunds
                         data={latestInvestment.map((item) => {
                           return {
diff --git a/src/components/dataTable.tsx b/src/components/dataTable.tsx
index 195aea8..8385d7e 100644
--- a/src/components/dataTable.tsx
+++ b/src/components/dataTable.tsx
@@ -203,7 +203,7 @@ export function DataTable({ data }: { data: ModalProps[] }) {
   });
 
   return (
-    <div className="w-full">
+    <div className="w-3/4 md:w-full">
       <div className="flex items-center py-4">
         <Input
           placeholder="Filter names..."
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index b6c06c0..7b9fb5e 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -20,7 +20,7 @@ export function Modal({ data }: { data: ModalProps[] }) {
         <DialogTrigger asChild>
           <Button>View More</Button>
         </DialogTrigger>
-        <DialogContent className="max-w-screen-lg ">
+        <DialogContent className="max-w-screen-md md:max-w-screen-lg ">
           <DataTable data={data} />
         </DialogContent>
       </Dialog>