From 8f758037976e0138f2c455e5296196c0eb31e554 Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Thu, 1 Jan 2026 21:00:30 +0100
Subject: [PATCH] fix: add overflow handling to charts and dashboard components
 for better layout

---
 src/components/dashboard/EventKindsChart.tsx     |  2 +-
 src/components/dashboard/RecentActivityChart.tsx |  6 +++---
 src/components/dashboard/RecentActivityList.tsx  | 10 +++++-----
 src/pages/Dashboard.tsx                          | 12 ++++++------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/EventKindsChart.tsx b/src/components/dashboard/EventKindsChart.tsx
index 3cb8915..2ed9889 100644
--- a/src/components/dashboard/EventKindsChart.tsx
+++ b/src/components/dashboard/EventKindsChart.tsx
@@ -156,7 +156,7 @@ export function EventKindsChart() {
   }
 
   return (
-    <Card className="flex flex-col">
+    <Card className="flex flex-col overflow-hidden">
       <CardHeader className="items-center pb-0">
         <CardTitle>Event Kinds Distribution</CardTitle>
         <CardDescription>Your top 5 event types</CardDescription>
diff --git a/src/components/dashboard/RecentActivityChart.tsx b/src/components/dashboard/RecentActivityChart.tsx
index 259d681..1f8175b 100644
--- a/src/components/dashboard/RecentActivityChart.tsx
+++ b/src/components/dashboard/RecentActivityChart.tsx
@@ -133,15 +133,15 @@ export function RecentActivityChart() {
   }
 
   return (
-    <Card>
+    <Card className="overflow-hidden">
       <CardHeader>
         <CardTitle>Recent Activity</CardTitle>
         <CardDescription>
           Your event activity over the last 30 days
         </CardDescription>
       </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="h-[250px] w-full">
+      <CardContent className="overflow-x-auto">
+        <ChartContainer config={chartConfig} className="h-[250px] w-full min-w-[300px]">
           <BarChart data={chartData} accessibilityLayer>
             <CartesianGrid strokeDasharray="3 3" vertical={false} />
             <XAxis
diff --git a/src/components/dashboard/RecentActivityList.tsx b/src/components/dashboard/RecentActivityList.tsx
index f352dd8..2e5af81 100644
--- a/src/components/dashboard/RecentActivityList.tsx
+++ b/src/components/dashboard/RecentActivityList.tsx
@@ -89,16 +89,16 @@ export function RecentActivityList({ pubkey }: RecentActivityListProps) {
                   key={event.id}
                   className="flex items-start justify-between border-b pb-3 last:border-0"
                 >
-                  <div className="space-y-1 flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <Badge variant="secondary" className="text-xs">
+                  <div className="space-y-1 flex-1 min-w-0 overflow-hidden">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Badge variant="secondary" className="text-xs shrink-0">
                         {kindName}
                       </Badge>
-                      <span className="text-xs text-muted-foreground">
+                      <span className="text-xs text-muted-foreground shrink-0">
                         {relativeTime}
                       </span>
                     </div>
-                    <p className="text-sm text-muted-foreground line-clamp-2">
+                    <p className="text-sm text-muted-foreground line-clamp-2 break-all">
                       {contentPreview}
                     </p>
                   </div>
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index f001b70..171e108 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -21,15 +21,15 @@ export function Dashboard() {
 
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen w-full">
+      <div className="flex min-h-screen w-full overflow-x-hidden">
         <AppSidebar />
-        <main className="flex-1">
+        <main className="flex-1 min-w-0">
           <div className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background px-4 lg:h-[60px] lg:px-6">
             <SidebarTrigger />
-            <h1 className="text-lg font-semibold md:text-xl">Dashboard</h1>
+            <h1 className="text-lg font-semibold md:text-xl truncate">Dashboard</h1>
           </div>
           
-          <div className="flex-1 space-y-6 p-4 md:p-6 lg:p-8">
+          <div className="flex-1 space-y-6 p-4 md:p-6 lg:p-8 overflow-x-hidden">
             {!user ? (
               <Card className="border-dashed">
                 <CardContent className="py-12 px-8 text-center">
@@ -46,10 +46,10 @@ export function Dashboard() {
             ) : (
               <>
                 <div className="space-y-2">
-                  <h2 className="text-3xl font-bold tracking-tight">
+                  <h2 className="text-2xl md:text-3xl font-bold tracking-tight break-words">
                     Welcome back {currentUser ? getDisplayName(currentUser) : ''}!
                   </h2>
-                  <p className="text-muted-foreground">
+                  <p className="text-sm md:text-base text-muted-foreground">
                     Here's an overview of your Nostr activity and statistics.
                   </p>
                 </div>