make responsive on mobile

1 files changed, 31 insertions, 0 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>
   );