wip: make screen responsive for mobile and browser.

src/app/(main)/accounts/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
+import { Group, Paper, ScrollArea, Stack, Table, Text, Title } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ export default function AccountSummary() {
   const router = useRouter();
   const [authorized, setAuthorized] = useState<boolean | null>(null);
   const [accountData, setAccountData] = useState<accountData[]>([]);
+  const isMobile = useMediaQuery("(max-width: 768px)");
 
   async function FetchAccountDetails() {
     try {
@@ -61,7 +63,8 @@ export default function AccountSummary() {
 
   const cellStyle = {
     border: "1px solid #ccc",
-    padding: "10px",
+    padding: isMobile ? "8px" : "10px",
+    fontSize: isMobile ? "13px" : "14px",
   };
 
   // Filter accounts
@@ -96,7 +99,7 @@ export default function AccountSummary() {
     <Paper shadow="sm" radius="md" p="md" withBorder w="100%"
     // bg="#97E6B8"
     >
-      <Title order={4} mb="sm">
+      <Title order={isMobile ? 5 : 4} mb="sm">
         {title}
       </Title>
       <ScrollArea>
@@ -117,25 +120,38 @@ export default function AccountSummary() {
     </Paper>
   );
 
-  if (authorized) {
-    return (
-      <Paper shadow="sm" radius="md" p="md" withBorder h={400}
-      // bg="linear-gradient(90deg,rgba(195, 218, 227, 1) 0%, rgba(151, 230, 184, 1) 50%)"
+  if (!authorized) return null;
+
+  return (
+    <Paper shadow="sm" radius="md" p="md" withBorder>
+      <Title
+        order={isMobile ? 4 : 3}
+        mb="md"
+        style={{ textAlign: isMobile ? "center" : "left" }}
       >
-        <Title order={3} mb="md">Account Summary</Title>
+        Account Summary
+      </Title>
+
+      {/* ✅ Responsive layout: Group for desktop, Stack for mobile */}
+      {isMobile ? (
+        <Stack gap="md">
+          {depositAccounts.length > 0 &&
+            renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
+          {loanAccounts.length > 0 &&
+            renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
+        </Stack>
+      ) : (
         <Group align="flex-start" grow>
-          {/* Left table for Deposit Accounts */}
-          {depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
-
-          {/* Right table for Loan Accounts (only shown if available) */}
-          {loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
+          {depositAccounts.length > 0 &&
+            renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
+          {loanAccounts.length > 0 &&
+            renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
         </Group>
-        <Text mt="sm" size="xs" c="dimmed">
-          * Book Balance includes uncleared effects.
-        </Text>
-      </Paper>
-    );
-  }
+      )}
 
-  return null;
+      <Text mt="sm" size="xs" c="dimmed">
+        * Book Balance includes uncleared effects.
+      </Text>
+    </Paper>
+  );
 }