make responsive on mobile

1 files changed, 36 insertions, 3 deletions

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>
   );