layer-systems/website
1
0
Fork 0
mirror of https://github.com/layer-systems/website.git synced 2026-06-17 01:58:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: add overflow handling to charts and dashboard components for better layout

Browse Source
This commit is contained in:
highperfocused
2026-01-01 21:00:30 +01:00
parent 38541d1635
commit 8f75803797
4 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dashboard/EventKindsChart.tsx
View File

@@ -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>

6
src/components/dashboard/RecentActivityChart.tsx
View File

@@ -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

10
src/components/dashboard/RecentActivityList.tsx
View File

@@ -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>

12
src/pages/Dashboard.tsx
View File

@@ -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>