feat: update layout and responsiveness of Dashboard, DataTable, and Modal components for improved user experience

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-14 19:08:46 +07:00
parent b47891ee64
commit 2ab3964a81
3 changed files with 4 additions and 4 deletions

View File

@ -263,11 +263,11 @@ export default function Dashboard() {
</CardContent> </CardContent>
</Tabs> </Tabs>
</Card> </Card>
<Card className="col-span-3 w-full"> <Card className="col-span-4 md:col-span-3">
<CardHeader> <CardHeader>
<CardTitle>Recent Funds</CardTitle> <CardTitle>Recent Funds</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid grid-flow-dense"> <CardContent className="grid grid-flow-dense w-full">
<RecentFunds <RecentFunds
data={latestInvestment.map((item) => { data={latestInvestment.map((item) => {
return { return {

View File

@ -203,7 +203,7 @@ export function DataTable({ data }: { data: ModalProps[] }) {
}); });
return ( return (
<div className="w-full"> <div className="w-3/4 md:w-full">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<Input <Input
placeholder="Filter names..." placeholder="Filter names..."

View File

@ -20,7 +20,7 @@ export function Modal({ data }: { data: ModalProps[] }) {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button>View More</Button> <Button>View More</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-w-screen-lg "> <DialogContent className="max-w-screen-md md:max-w-screen-lg ">
<DataTable data={data} /> <DataTable data={data} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>