fix: Resolve frontend responsive design and data accuracy issues

frontend/src/components/WalletConnect.tsx

@@ -386,6 +386,7 @@ const WalletConnect: React.FC<WalletConnectProps> = ({
 
       {showTooltip && (
         <div
+          className="wallet-tooltip"
           style={{
             position: "absolute",
             bottom: "100%",
@@ -398,7 +399,9 @@ const WalletConnect: React.FC<WalletConnectProps> = ({
             borderRadius: "4px",
             fontSize: "0.75rem",
             color: connectionError ? "var(--accent-red)" : "var(--text-secondary)",
-            whiteSpace: "nowrap",
+            whiteSpace: "normal",
+            wordWrap: "break-word",
+            maxWidth: "200px",
             zIndex: 1000,
             boxShadow: connectionError
               ? "0 0 12px rgba(255, 80, 100, 0.15)"

frontend/src/index.css

@@ -1182,11 +1182,6 @@ button {
     right: 16px;
     width: auto;
   }
-
-  /* Settings page mobile overrides */
-  .settings-locale-grid {
-    grid-template-columns: 1fr !important;
-  }
 }
 
 /* ── Compact Mode ───────────────────────────────────────────────── */
@@ -1299,6 +1294,11 @@ button {
     width: 100%;
     flex: 1 1 100%;
   }
+
+  /* Settings page mobile overrides */
+  .settings-locale-grid {
+    grid-template-columns: 1fr !important;
+  }
 }
 .compact-mode .data-table th,
 .compact-mode .data-table td {
@@ -1668,3 +1668,17 @@ button {
   border-radius: 50%;
 }
 
+
+/* Wallet tooltip responsive positioning */
+.wallet-tooltip {
+  max-width: calc(100vw - 32px);
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 480px) {
+  .wallet-tooltip {
+    max-width: 150px;
+    font-size: 0.7rem;
+    padding: 6px 10px;
+  }
+}

frontend/src/pages/Portfolio.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect } from "react";
 import { Activity, ShieldCheck, TrendingUp, DollarSign, Percent, Briefcase } from "../components/icons";
 import ApiStatusBanner from "../components/ApiStatusBanner";
 import Skeleton from "../components/Skeleton";
 import {
@@ -272,6 +272,25 @@
     return holdings.reduce((sum, h) => sum + (h.apy * h.valueUsd), 0) / totalValue;
   }, [holdings, totalValue]);
 
+  // Compute trend values
+  const totalNetValueTrend = useMemo(() => {
+    if (totalValue === 0) return "N/A";
+    // Calculate 7-day trend (simplified: using current value as proxy)
+    // In a real app, this would compare with historical data
+    const trendPercent = ((totalGain / (totalValue - totalGain)) * 100).toFixed(1);
+    return isFinite(Number(trendPercent)) ? `${trendPercent}% gain` : "N/A";
+  }, [totalValue, totalGain]);
+
+  const cumulativeYieldTrend = useMemo(() => {
+    if (totalGain === 0) return "--";
+    return `${formatCurrency(totalGain)} realized`;
+  }, [totalGain]);
+
+  const weightedApyTrend = useMemo(() => {
+    if (holdings.length === 0) return "N/A";
+    return `${holdings.length} position${holdings.length !== 1 ? 's' : ''}`;
+  }, [holdings.length]);
+
   return (
     <div className="glass-panel" style={{ padding: "32px" }}>
       <PageHeader
@@ -324,21 +343,21 @@
               label="Total Net Value" 
               value={formatCurrency(totalValue)} 
               icon={<DollarSign size={20} color="var(--accent-cyan)" />}
-              trend="+4.2% since last week"
-              trendPositive={true}
+              trend={totalNetValueTrend}
+              trendPositive={totalGain >= 0}
             />
             <PortfolioSummaryCard 
               label="Cumulative Yield" 
-              value={`+${formatCurrency(totalGain)}`} 
+              value={`${totalGain >= 0 ? '+' : ''}${formatCurrency(totalGain)}`} 
               icon={<TrendingUp size={20} color="var(--accent-purple)" />}
-              trend="All-time unrealized"
+              trend={cumulativeYieldTrend}
               trendPositive={totalGain >= 0}
             />
             <PortfolioSummaryCard 
               label="Weighted Avg APY" 
               value={`${weightedApy.toFixed(2)}%`} 
               icon={<Percent size={20} color="var(--accent-cyan)" />}
-              trend="Current performance"
+              trend={weightedApyTrend}
               trendPositive={true}
             />
             <PortfolioSummaryCard