From 1adcad18557e25d155cafdaaac0ee4ea5ab4e23a Mon Sep 17 00:00:00 2001
From: tomato6966 <chris.pre03@gmail.com>
Date: Sat, 18 Jan 2025 20:11:49 +0100
Subject: [PATCH] add a little responsiveness

---
 .../Chart/AssetPerformanceModal.tsx           | 169 ++++++++++--------
 .../Chart/PortfolioPerformanceModal.tsx       | 138 ++++++++------
 2 files changed, 173 insertions(+), 134 deletions(-)

diff --git a/src/components/Chart/AssetPerformanceModal.tsx b/src/components/Chart/AssetPerformanceModal.tsx
index 4bcb5e0..f6a93f8 100644
--- a/src/components/Chart/AssetPerformanceModal.tsx
+++ b/src/components/Chart/AssetPerformanceModal.tsx
@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import {
 	CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
 } from "recharts";
@@ -13,6 +13,14 @@ interface AssetPerformanceModalProps {
 export const AssetPerformanceModal = memo(({ assetName, performances, onClose }: AssetPerformanceModalProps) => {
     const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
 
+    // Prevent body scroll when modal is open
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, []);
+
     const CustomizedDot = (props: any) => {
         const { cx, cy, payload } = props;
         return (
@@ -26,83 +34,94 @@ export const AssetPerformanceModal = memo(({ assetName, performances, onClose }:
     };
 
     return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-            <div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl">
-                <div className="flex justify-between items-center mb-6">
-                    <h2 className="text-xl font-bold">{assetName} - Yearly Performance</h2>
-                    <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded">
-                        <X className="w-6 h-6" />
+        <div className="fixed inset-0 bg-black/50 z-50 md:flex md:items-center md:justify-center">
+            <div className="h-full md:h-auto w-full md:w-[80vw] bg-white dark:bg-slate-800 md:rounded-lg overflow-hidden">
+                {/* Header - Fixed */}
+                <div className="sticky top-0 z-10 bg-white dark:bg-slate-800 p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+                    <h2 className="text-xl font-bold dark:text-gray-300">{assetName} - Yearly Performance</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded"
+                    >
+                        <X className="w-6 h-6 dark:text-gray-300" />
                     </button>
                 </div>
-                <div className="h-[400px]">
-                    <ResponsiveContainer>
-                        <LineChart data={sortedPerformances}>
-                            <CartesianGrid strokeDasharray="3 3" />
-                            <XAxis dataKey="year" />
-                            <YAxis
-                                yAxisId="left"
-                                tickFormatter={(value) => `${value.toFixed(2)}%`}
-                            />
-                            <YAxis
-                                yAxisId="right"
-                                orientation="right"
-                                tickFormatter={(value) => `€${value.toFixed(2)}`}
-                            />
-                            <Tooltip
-                                formatter={(value: number, name: string) => {
-                                    if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
-                                    return [`€${value.toFixed(2)}`, name];
-                                }}
-                                labelFormatter={(year) => `Year ${year}`}
-                            />
-                            <Line
-                                type="monotone"
-                                dataKey="percentage"
-                                name="Performance"
-                                stroke="url(#colorGradient)"
-                                dot={<CustomizedDot />}
-                                strokeWidth={2}
-                                yAxisId="left"
-                            />
-                            <Line
-                                type="monotone"
-                                dataKey="price"
-                                name="Price"
-                                stroke="#666"
-                                strokeDasharray="5 5"
-                                dot={false}
-                                yAxisId="right"
-                            />
-                            <defs>
-                                <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
-                                    <stop offset="0%" stopColor="#22c55e" />
-                                    <stop offset="100%" stopColor="#ef4444" />
-                                </linearGradient>
-                            </defs>
-                        </LineChart>
-                    </ResponsiveContainer>
-                </div>
-                <div className="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                    {sortedPerformances.map(({ year, percentage, price }) => (
-                        <div
-                            key={year}
-                            className={`p-3 rounded-lg ${
-                                percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
-                            }`}
-                        >
-                            <div className="text-sm font-medium">{year}</div>
-                            <div className={`text-lg font-bold ${
-                                percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
-                            }`}>
-                                {percentage.toFixed(2)}%
-                            </div>
-                            {price && (
-                                <div className="text-sm text-gray-500 dark:text-gray-400">
-                                    €{price.toFixed(2)}
+
+                {/* Content - Scrollable */}
+                <div className="overflow-y-auto h-[calc(100vh-64px)] md:h-[calc(80vh-64px)] p-6">
+                    {/* Chart */}
+                    <div className="h-[400px] mb-6">
+                        <ResponsiveContainer>
+                            <LineChart data={sortedPerformances}>
+                                <CartesianGrid strokeDasharray="3 3" />
+                                <XAxis dataKey="year" />
+                                <YAxis
+                                    yAxisId="left"
+                                    tickFormatter={(value) => `${value.toFixed(2)}%`}
+                                />
+                                <YAxis
+                                    yAxisId="right"
+                                    orientation="right"
+                                    tickFormatter={(value) => `€${value.toFixed(2)}`}
+                                />
+                                <Tooltip
+                                    formatter={(value: number, name: string) => {
+                                        if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
+                                        return [`€${value.toFixed(2)}`, name];
+                                    }}
+                                    labelFormatter={(year) => `Year ${year}`}
+                                />
+                                <Line
+                                    type="monotone"
+                                    dataKey="percentage"
+                                    name="Performance"
+                                    stroke="url(#colorGradient)"
+                                    dot={<CustomizedDot />}
+                                    strokeWidth={2}
+                                    yAxisId="left"
+                                />
+                                <Line
+                                    type="monotone"
+                                    dataKey="price"
+                                    name="Price"
+                                    stroke="#666"
+                                    strokeDasharray="5 5"
+                                    dot={false}
+                                    yAxisId="right"
+                                />
+                                <defs>
+                                    <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                                        <stop offset="0%" stopColor="#22c55e" />
+                                        <stop offset="100%" stopColor="#ef4444" />
+                                    </linearGradient>
+                                </defs>
+                            </LineChart>
+                        </ResponsiveContainer>
+                    </div>
+
+                    {/* Performance Cards */}
+                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 dark:text-gray-300">
+                        {sortedPerformances.map(({ year, percentage, price }) => (
+                            <div
+                                key={year}
+                                className={`p-3 rounded-lg ${
+                                    percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
+                                }`}
+                            >
+                                <div className="text-sm font-medium">{year}</div>
+                                <div className={`text-lg font-bold ${
+                                    percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+                                }`}>
+                                    {percentage.toFixed(2)}%
                                 </div>
-                            )}
-                        </div>
-                    ))}
+                                {price && (
+                                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                                        €{price.toFixed(2)}
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/components/Chart/PortfolioPerformanceModal.tsx b/src/components/Chart/PortfolioPerformanceModal.tsx
index f696da1..1cabfeb 100644
--- a/src/components/Chart/PortfolioPerformanceModal.tsx
+++ b/src/components/Chart/PortfolioPerformanceModal.tsx
@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import {
 	CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
 } from "recharts";
@@ -11,6 +11,15 @@ interface PortfolioPerformanceModalProps {
 
 export const PortfolioPerformanceModal = memo(({ performances, onClose }: PortfolioPerformanceModalProps) => {
     const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
+
+    // Prevent body scroll when modal is open
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, []);
+
     const CustomizedDot = (props: any) => {
         const { cx, cy, payload } = props;
         return (
@@ -24,69 +33,80 @@ export const PortfolioPerformanceModal = memo(({ performances, onClose }: Portfo
     };
 
     return (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-            <div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl">
-                <div className="flex justify-between items-center mb-6">
+        <div className="fixed inset-0 bg-black/50 z-50 md:flex md:items-center md:justify-center">
+            <div className="h-full md:h-auto w-full md:w-[80vw] bg-white dark:bg-slate-800 md:rounded-lg overflow-hidden">
+                {/* Header - Fixed */}
+                <div className="sticky top-0 z-10 bg-white dark:bg-slate-800 p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                     <h2 className="text-xl font-bold dark:text-gray-300">Portfolio Performance History</h2>
-                    <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded">
+                    <button
+                        onClick={onClose}
+                        className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded"
+                    >
                         <X className="w-6 h-6 dark:text-gray-300" />
                     </button>
                 </div>
-                <div className="h-[400px]">
-                    <ResponsiveContainer>
-                        <LineChart data={sortedPerformances}>
-                            <CartesianGrid strokeDasharray="3 3" />
-                            <XAxis dataKey="year" />
-                            <YAxis
-                                yAxisId="left"
-                                tickFormatter={(value) => `${value.toFixed(2)}%`}
-                            />
-                            <YAxis
-                                yAxisId="right"
-                                orientation="right"
-                                tickFormatter={(value) => `€${value.toLocaleString()}`}
-                            />
-                            <Tooltip
-                                formatter={(value: number, name: string) => {
-                                    if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
-                                    return [`€${value.toLocaleString()}`, 'Portfolio Value'];
-                                }}
-                                labelFormatter={(year) => `Year ${year}`}
-                            />
-                            <Line
-                                type="monotone"
-                                dataKey="percentage"
-                                name="Performance"
-                                stroke="url(#colorGradient)"
-                                dot={<CustomizedDot />}
-                                strokeWidth={2}
-                                yAxisId="left"
-                            />
-                            <defs>
-                                <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
-                                    <stop offset="0%" stopColor="#22c55e" />
-                                    <stop offset="100%" stopColor="#ef4444" />
-                                </linearGradient>
-                            </defs>
-                        </LineChart>
-                    </ResponsiveContainer>
-                </div>
-                <div className="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 dark:text-gray-300">
-                    {sortedPerformances.map(({ year, percentage }) => (
-                        <div
-                            key={year}
-                            className={`p-3 rounded-lg ${
-                                percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
-                            }`}
-                        >
-                            <div className="text-sm font-medium">{year}</div>
-                            <div className={`text-lg font-bold ${
-                                percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
-                            }`}>
-                                {percentage.toFixed(2)}%
+
+                {/* Content - Scrollable */}
+                <div className="overflow-y-auto h-[calc(100vh-64px)] md:h-[calc(80vh-64px)] p-6">
+                    {/* Chart */}
+                    <div className="h-[400px] mb-6">
+                        <ResponsiveContainer>
+                            <LineChart data={sortedPerformances}>
+                                <CartesianGrid strokeDasharray="3 3" />
+                                <XAxis dataKey="year" />
+                                <YAxis
+                                    yAxisId="left"
+                                    tickFormatter={(value) => `${value.toFixed(2)}%`}
+                                />
+                                <YAxis
+                                    yAxisId="right"
+                                    orientation="right"
+                                    tickFormatter={(value) => `€${value.toLocaleString()}`}
+                                />
+                                <Tooltip
+                                    formatter={(value: number, name: string) => {
+                                        if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
+                                        return [`€${value.toLocaleString()}`, 'Portfolio Value'];
+                                    }}
+                                    labelFormatter={(year) => `Year ${year}`}
+                                />
+                                <Line
+                                    type="monotone"
+                                    dataKey="percentage"
+                                    name="Performance"
+                                    stroke="url(#colorGradient)"
+                                    dot={<CustomizedDot />}
+                                    strokeWidth={2}
+                                    yAxisId="left"
+                                />
+                                <defs>
+                                    <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
+                                        <stop offset="0%" stopColor="#22c55e" />
+                                        <stop offset="100%" stopColor="#ef4444" />
+                                    </linearGradient>
+                                </defs>
+                            </LineChart>
+                        </ResponsiveContainer>
+                    </div>
+
+                    {/* Performance Cards */}
+                    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 dark:text-gray-300">
+                        {sortedPerformances.map(({ year, percentage }) => (
+                            <div
+                                key={year}
+                                className={`p-3 rounded-lg ${
+                                    percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
+                                }`}
+                            >
+                                <div className="text-sm font-medium">{year}</div>
+                                <div className={`text-lg font-bold ${
+                                    percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+                                }`}>
+                                    {percentage.toFixed(2)}%
+                                </div>
                             </div>
-                        </div>
-                    ))}
+                        ))}
+                    </div>
                 </div>
             </div>
         </div>