make responsive on mobile

2 files changed, 67 insertions, 3 deletions

diff --git a/client/src/BidsPage.jsx b/client/src/BidsPage.jsx
index fad3989..e0c4128 100644
--- a/client/src/BidsPage.jsx
+++ b/client/src/BidsPage.jsx
@@ -10,18 +10,21 @@ const columns = (bids) => [
     dataIndex: 'timestamp',
     sorter: (a, b) => new Date(a.timestamp) - new Date(b.timestamp),
     render: (val) => new Date(val).toLocaleString(),
+    width: 180,
   },
   {
     title: 'Quantity (MW)',
     dataIndex: 'quantity',
     sorter: (a, b) => a.quantity - b.quantity,
     render: (val) => val.toFixed(2),
+    width: 180,
   },
   {
     title: 'Price ($/MWh)',
     dataIndex: 'price',
     sorter: (a, b) => a.price - b.price,
     render: (val) => `$${val.toFixed(2)}`,
+    width: 180,
   },
   {
     title: 'Status',
@@ -36,6 +39,7 @@ const columns = (bids) => [
     render: (val) => (
       <Badge status={val === 'Success' ? 'success' : val === 'Fail' ? 'error' : 'processing'} text={val} />
     ),
+    width: 180,
   },
   {
     title: 'PnL',
@@ -52,6 +56,7 @@ const columns = (bids) => [
         </Typography.Text>
       );
     },
+    width: 180,
   },
   {
     title: 'Market',
@@ -64,6 +69,7 @@ const columns = (bids) => [
     ],
     onFilter: (value, record) => record.market === value,
     render: (val) => val,
+    width: 180,
   },
 ];
 
@@ -111,6 +117,7 @@ function BidsPage() {
             <Empty description="No bids found yet." />
           </div>
         ) : (
+          <div className="responsive-table-wrapper">
           <Table
             columns={columns(bids)}
             data={bids}
@@ -125,6 +132,7 @@ function BidsPage() {
             style={{ transition: 'opacity 0.5s ease-in-out' }}
             rowClassName={() => 'table-row-hover'}
           />
+          </div>
         )}
       </Card>
 
@@ -143,6 +151,29 @@ function BidsPage() {
           background-color: var(--color-fill-3);
           transition: background-color 0.3s ease;
         }
+
+        responsive-table-wrapper {
+          width: 100%;
+          overflow-x: auto;
+        }
+
+        /* Prevent wrapping in header and cells */
+        .responsive-table-wrapper table th,
+        .responsive-table-wrapper table td {
+          white-space: nowrap;
+        }
+
+        /* Optional: smaller fonts on mobile */
+        @media (max-width: 768px) {
+          .responsive-table-wrapper table {
+            font-size: 12px;
+          }
+          .responsive-table-wrapper th,
+          .responsive-table-wrapper td {
+            padding: 8px;
+          }
+        }
+
       `}</style>
     </div>
   );
diff --git a/client/src/MarketDataPage.jsx b/client/src/MarketDataPage.jsx
index f874baa..5e028f8 100644
--- a/client/src/MarketDataPage.jsx
+++ b/client/src/MarketDataPage.jsx
@@ -49,7 +49,7 @@ function MarketDataPage() {
   const [loading, setLoading] = useState(true);
   const [fiveMinLastUpdated, setFiveMinLastUpdated] = useState(null);
   const [dayAheadLastUpdated, setDayAheadLastUpdated] = useState(null);
-  const [_, setNow] = useState(new Date());
+  const [, setNow] = useState(new Date());
 
   const handleZoomChange = (e, title) => {
      if (!e?.start || !e?.end) return;
@@ -192,8 +192,8 @@ function MarketDataPage() {
   const dayAheadKPIs = computeKPIs(dayAheadData);
 
   return (
-    <div style={{ padding: 20, background: 'var(--color-fill-2)', animation: 'fadeIn 0.5s ease' }}>
-      <Typography.Title heading={3} style={{ textAlign: 'center', marginBottom: 20 }}>
+    <div className="page-container">
+      <Typography.Title heading={3} style={{ textAlign: 'center', marginBottom: 20 }} className="market-page-title" >
         Market Data for {MARKET_FULL_NAMES[selectedMarket]}
       </Typography.Title>
 
@@ -279,6 +279,39 @@ function MarketDataPage() {
           from { opacity: 0; transform: translateY(10px); }
           to { opacity: 1; transform: translateY(0); }
         }
+
+        .arco-card-header-title {
+          white-space: normal !important; /* allow wrapping */
+          word-break: break-word;
+        }
+
+        /* Optional: smaller text on tiny devices */
+        @media (max-width: 768px) {
+          .arco-card-header-title {
+            font-size: 14px;
+          }
+        }
+
+        .market-page-title {
+          white-space: normal;
+          word-break: keep-all;
+          overflow-wrap: break-word;
+          text-align: center;
+        }
+
+        .page-container {
+          padding: 15px;
+          background: var(--color-fill-2);
+          animation: fadeIn 0.5s ease;
+          overflow-x: hidden; /* Also good practice */
+        }
+
+        /* Responsive: remove padding on small screens */
+        @media (max-width: 768px) {
+          .page-container {
+            padding: 0;
+          }
+        }
       `}</style>
     </div>
   );