feat(frontend): implemented mobile friendly UI responsiveness

7project/frontend/src/pages/BalanceChart.tsx

@@ -1,5 +1,6 @@
 // src/BalanceChart.tsx
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { useEffect, useRef, useState } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 import { type BalancePoint } from '../api';
 
 function formatAmount(n: number) {
@@ -10,37 +11,56 @@ function formatDate(dateStr: string) {
   return new Date(dateStr).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
 }
 
-export default function BalanceChart({ data }: { data: BalancePoint[] }) {
+type Props = { data: BalancePoint[]; pxPerPoint?: number };
+
+export default function BalanceChart({ data, pxPerPoint = 40 }: Props) {
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  useEffect(() => {
+    function measure() {
+      if (!wrapRef.current) return;
+      setContainerWidth(wrapRef.current.clientWidth);
+    }
+    measure();
+    const obs = new ResizeObserver(measure);
+    if (wrapRef.current) obs.observe(wrapRef.current);
+    return () => obs.disconnect();
+  }, []);
+
   if (data.length === 0) {
     return <div>No data to display</div>;
   }
 
+  const desiredWidth = Math.max(containerWidth, Math.max(600, data.length * pxPerPoint));
+
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <LineChart
-        data={data}
-        // Increased 'left' margin to create more space for the Y-axis label and tick values
-        margin={{ top: 5, right: 30, left: 50, bottom: 5 }} // <-- Change this line
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis
-          dataKey="date"
-          tickFormatter={formatDate}
-          label={{ value: 'Date', position: 'insideBottom', offset: -5 }}
-        />
-        <YAxis
-          tickFormatter={(value) => formatAmount(value as number)}
-          // Adjusted 'offset' for the Y-axis label.
-          // A negative offset moves it further away from the axis.
-          label={{ value: 'Balance', angle: -90, position: 'insideLeft', offset: -30 }} // <-- Change this line
-        />
-        <Tooltip
-          labelFormatter={formatDate}
-          formatter={(value) => [formatAmount(value as number), 'Balance']}
-        />
-        <Legend />
-        <Line type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={2} activeDot={{ r: 8 }} />
-      </LineChart>
-    </ResponsiveContainer>
+    <div ref={wrapRef} className="chart-scroll">
+      <div className="chart-inner" style={{ minWidth: desiredWidth, paddingBottom: 8 }}>
+        <LineChart
+          width={desiredWidth}
+          height={300}
+          data={data}
+          margin={{ top: 5, right: 30, left: 50, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="date"
+            tickFormatter={formatDate}
+            label={{ value: 'Date', position: 'insideBottom', offset: -5 }}
+          />
+          <YAxis
+            tickFormatter={(value) => formatAmount(value as number)}
+            label={{ value: 'Balance', angle: -90, position: 'insideLeft', offset: -30 }}
+          />
+          <Tooltip
+            labelFormatter={formatDate}
+            formatter={(value) => [formatAmount(value as number), 'Balance']}
+          />
+          <Legend />
+          <Line type="monotone" dataKey="balance" stroke="#3b82f6" strokeWidth={2} activeDot={{ r: 8 }} />
+        </LineChart>
+      </div>
+    </div>
   );
 }

7project/frontend/src/pages/CategoryPieChart.tsx

@@ -92,9 +92,13 @@ export default function CategoryPieCharts({ transactions, categories }: { transa
 
 
   return (
-    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', justifyContent: 'center' }}>
-      <SinglePieChart data={expensesData} title="Expenses by Category" />
-      <SinglePieChart data={earningsData} title="Earnings by Category" />
+    <div className="pie-grid" >
+        <div className="pie-card">
+            <SinglePieChart data={expensesData} title="Expenses by Category" />
+        </div>
+        <div className="pie-card">
+            <SinglePieChart data={earningsData} title="Earnings by Category" />
+        </div>
     </div>
   );
 }

7project/frontend/src/pages/Dashboard.tsx

@@ -168,6 +168,9 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
   const [editingDescription, setEditingDescription] = useState<string>('');
   const [editingDate, setEditingDate] = useState<string>(''); // YYYY-MM-DD
 
+  // Sidebar toggle for mobile
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
 
 
   async function loadAll() {
@@ -312,11 +315,11 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
   }
 
   return (
-    <div className="app-layout">
+    <div className={`app-layout ${sidebarOpen ? 'sidebar-open' : ''}`}>
       <aside className="sidebar" style={{ display: 'flex', flexDirection: 'column' }}>
         <div>
           <div className="logo">7Project</div>
-          <nav className="nav">
+          <nav className="nav" onClick={() => setSidebarOpen(false)}>
             <button className={current === 'home' ? 'active' : ''} onClick={() => setCurrent('home')}>Home</button>
             <button className={current === 'manual' ? 'active' : ''} onClick={() => setCurrent('manual')}>Manual management</button>
             <button className={current === 'account' ? 'active' : ''} onClick={() => setCurrent('account')}>Account</button>
@@ -329,6 +332,12 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
       </aside>
       <div className="content">
         <div className="topbar">
+          <button
+            className="icon-btn hamburger"
+            aria-label="Open menu"
+            aria-expanded={sidebarOpen}
+            onClick={() => setSidebarOpen(true)}
+          >☰</button>
           <h2 style={{ margin: 0 }}>{current === 'home' ? 'Dashboard' : current === 'manual' ? 'Manual management' : current === 'account' ? 'Account' : 'Appearance'}</h2>
           <div className="actions">
             <span className="user muted">Signed in</span>
@@ -409,7 +418,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                         <button className="btn primary" disabled={page >= totalPages - 1} onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}>Next</button>
                       </div>
                     </div>
-                    <table className="table">
+                    <table className="table responsive">
                       <thead>
                         <tr>
                           <th>Date</th>
@@ -423,7 +432,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                         {visible.map(t => (
                           <tr key={t.id}>
                             {/* Date cell */}
-                            <td>
+                            <td data-label="Date">
                               {editingTxId === t.id ? (
                                 <input
                                   className="input"
@@ -437,7 +446,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                             </td>
 
                             {/* Amount cell */}
-                            <td className="amount" style={{ textAlign: 'right' }}>
+                            <td data-label="Amount" className="amount" style={{ textAlign: 'right' }}>
                               {editingTxId === t.id ? (
                                 <input
                                   className="input"
@@ -453,7 +462,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                             </td>
 
                             {/* Description cell */}
-                            <td>
+                            <td data-label="Description">
                               {editingTxId === t.id ? (
                                 <input
                                   className="input"
@@ -467,7 +476,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                             </td>
 
                             {/* Categories cell */}
-                            <td>
+                            <td data-label="Categories">
                               {editingTxId === t.id ? (
                                 <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                   <select
@@ -490,15 +499,15 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
                             </td>
 
                             {/* Actions cell */}
-                            <td>
+                            <td data-label="Actions">
                               {editingTxId === t.id ? (
-                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                                <div className="actions" style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                   <button className="btn small" onClick={saveEditTransaction}>Save</button>
                                   <button className="btn small" onClick={cancelEditTransaction}>Cancel</button>
                                   <button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button>
                                 </div>
                               ) : (
-                                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                                <div className="actions" style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                                   <button className="btn small" onClick={() => beginEditTransaction(t)}>Edit</button>
                                   <button className="btn small" onClick={() => handleDeleteTransaction(t.id)}>Delete</button>
                                 </div>
@@ -539,6 +548,7 @@ export default function Dashboard({ onLogout }: { onLogout: () => void }) {
           onClose={() => setMockModalOpen(false)}
           onGenerate={handleGenerateMockTransactions}
         />
+      {sidebarOpen && <div className="backdrop" onClick={() => setSidebarOpen(false)} />}
     </div>
   );
 }

7project/frontend/src/pages/LoginRegisterPage.tsx

@@ -80,7 +80,7 @@ export default function LoginRegisterPage({ onLoggedIn }: { onLoggedIn: () => vo
             <input className="input" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} />
           </div>
           {mode === 'register' && (
-            <div className="form-row">
+            <div className="space-y">
               <div>
                 <label className="muted">First name (optional)</label>
                 <input className="input" type="text" value={firstName} onChange={(e) => setFirstName(e.target.value)} />