Merge pull request #7 from alpenlabs/resizing-pages

make the page contents adjust to resizing

Author: purusang

frontend/package-lock.json

@@ -4,7 +4,6 @@ import App from "./App";
 import "./styles/index.css";
 
 
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />

frontend/src/main.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { useLocation } from "react-router-dom";
 import { useBridgeStatus, OperatorStatus, DepositInfo, WithdrawalInfo, ReimbursementInfo } from "../hooks/useBridgeStatus";
+import '../styles/bridge.css';
 
 const truncateHex = (hex: string, startLength = 4, endLength = 4) => {
     if (!hex) return "-"; // If no TXID, show "-"

frontend/src/pages/Bridge.tsx

@@ -1,15 +1,20 @@
-import { lazy, Suspense } from "react";
+import { lazy, Suspense, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useNetworkStatus } from "../hooks/useNetworkStatus";
 import { usePaymasterWallets } from "../hooks/usePaymasterWallets";
 import convertWeiToBtc from "../utils";
+import "../styles/network.css";
 
 const StatusCard = lazy(() => import("../components/StatusCard"));
 const BalanceCard = lazy(() => import("../components/BalanceCard"));
 const Bridge = lazy(() => import("./Bridge"));
 const Usage = lazy(() => import("./Usage"));
 
 export default function Dashboard() {
+    const [isMenuOpen, setMenuOpen] = useState(false);
+    const toggleMenu = () => {
+        setMenuOpen((prev) => !prev);
+    };
     const { pathname } = useLocation(); // Get current URL path
     const { data, isLoading, error } = useNetworkStatus();
     const { data: wallets, isLoading: bal_isLoading, error: bal_error } = usePaymasterWallets();
@@ -18,16 +23,50 @@ export default function Dashboard() {
         <div className="dashboard">
             <div className="sidebar">
                 {/* Logo Wrapper */}
-                <a href="/" className="logoWrapper">
-                    <div className="logoSvg">
+                <a href="/" className="logo-wrapper">
+                    <div className="logo-svg">
                         <img src="/Strata_full_logo_sand.png" alt="STRATA" />
                     </div>
                 </a>
-                {/* Menu */}
-                <div className="menu">
-                    <Link to="/" className={`menu-item ${pathname === "/" ? "active" : ""}`}>Network</Link>
-                    <Link to="/bridge" className={`menu-item ${pathname === "/bridge" ? "active" : ""}`}>Bridge</Link>
-                    <Link to="/usage" className={`menu-item ${pathname === "/usage" ? "active" : ""}`}>Usage</Link>
+                {/* Hamburger / Cross toggle — only shown on mobile */}
+                <div className="menu-button" onClick={toggleMenu}>
+                {isMenuOpen ? (
+                    <div className="cross">
+                    <div className="cross-bar"></div>
+                    <div className="cross-bar"></div>
+                    </div>
+                ) : (
+                    <div className="hamburger">
+                    <div className="hamburger-bar"></div>
+                    <div className="hamburger-bar"></div>
+                    <div className="hamburger-bar"></div>
+                    </div>
+                )}
+                </div>
+
+                {/* Responsive menu dropdown (mobile) */}
+                <div className={`navbar-menu-wrapper ${isMenuOpen ? "show-menu" : ""}`}>
+                <Link
+                    to="/"
+                    className={`menu-item ${pathname === "/" ? "active" : ""}`}
+                    onClick={() => setMenuOpen(false)}
+                >
+                    Network
+                </Link>
+                <Link
+                    to="/bridge"
+                    className={`menu-item ${pathname === "/bridge" ? "active" : ""}`}
+                    onClick={() => setMenuOpen(false)}
+                >
+                    Bridge
+                </Link>
+                <Link
+                    to="/usage"
+                    className={`menu-item ${pathname === "/usage" ? "active" : ""}`}
+                    onClick={() => setMenuOpen(false)}
+                >
+                    Activity
+                </Link>
                 </div>
             </div>
 

frontend/src/pages/Dashboard.tsx

@@ -1,6 +1,7 @@
 import { Suspense, useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { useUsageStats } from "../hooks/useUsageStats.ts";
+import "../styles/usage.css";
 
 interface TimePeriodTabsProps {
     timePeriods: string[];

frontend/src/pages/Usage.tsx

@@ -0,0 +1,89 @@
+.bridge-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.bridge-title {
+  margin-bottom: 50px;
+  color: var(--strata-terracotta-med);
+}
+
+.bridge-section {
+  max-width: 100%;
+  overflow-x: visible;
+  padding-right: 0;
+  padding-left: 24px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.operators-table,
+.transactions-table {
+  min-width: 768px;
+  width: auto;
+  border-collapse: collapse;
+}
+
+.operators-row td:first-child {
+  font-weight: bold;
+}
+
+.transactions-header th,
+.operators-row td,
+.transactions-row td {
+  text-align: center;
+  padding: 12px 60px;
+}
+
+.transactions-header th {
+  font-weight: bold;
+  border-bottom: 1px solid darkgray;
+}
+
+.operators-row:not(:last-child),
+.transactions-row {
+  border-bottom: 1px solid darkgray;
+}
+
+.table-cell {
+  text-align: center;
+}
+
+.no-items {
+  font-style: italic;
+  color: gray;
+}
+
+@media screen and (min-width: 769px) {
+  .table-wrapper {
+    overflow-x: visible; /* ✅ Only scroll on small screens */
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .table-wrapper {
+    display: block;
+  }
+
+  .bridge-section {
+    margin: 1rem 0;
+  }
+
+  .operators-table,
+  .transactions-table {
+    min-width: 600px;
+  }
+
+  .transactions-header th,
+  .transactions-row td,
+  .operators-row td {
+    padding: 8px;
+    font-size: 14px;
+  }
+}