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: enhance layout and overflow handling in EventExplorer and DashboardEvents components

Browse Source
This commit is contained in:
highperfocused
2026-01-01 21:00:37 +01:00
parent 8f75803797
commit d464e8a44c
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/dashboard/EventExplorer.tsx
View File

@@ -185,11 +185,11 @@ export function EventExplorer({ pubkey }: EventExplorerProps) {
return (
<>
<Card>
<Card className="overflow-hidden">
<CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div>
<CardTitle>Your Events</CardTitle>
<CardDescription>
<div className="min-w-0">
<CardTitle className="break-words">Your Events</CardTitle>
<CardDescription className="break-words">
Browse your published events and request deletion directly from your dashboard.
</CardDescription>
</div>
@@ -223,16 +223,16 @@ export function EventExplorer({ pubkey }: EventExplorerProps) {
key={event.id}
className="flex flex-col gap-2 rounded-lg border bg-card/40 p-3 transition hover:bg-accent/40 sm:flex-row sm:items-center sm:justify-between"
>
<div className="space-y-1">
<div className="space-y-1 min-w-0 overflow-hidden">
<div className="flex flex-wrap items-center gap-2">
<Badge variant="secondary" className="text-xs">
<Badge variant="secondary" className="text-xs shrink-0">
{label}
</Badge>
<span className="text-xs text-muted-foreground">
<span className="text-xs text-muted-foreground shrink-0">
{createdAt.toLocaleString()}
</span>
</div>
<p className="text-sm text-muted-foreground line-clamp-2 max-w-xl">
<p className="text-sm text-muted-foreground line-clamp-2 max-w-xl break-all">
{contentPreview}
</p>
</div>
@@ -311,8 +311,8 @@ export function EventExplorer({ pubkey }: EventExplorerProps) {
</div>
</ScrollArea>
<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
<div>
<div className="mt-4 flex flex-col gap-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
<div className="text-center sm:text-left">
Showing
{' '}
<span className="font-medium">
@@ -333,7 +333,7 @@ export function EventExplorer({ pubkey }: EventExplorerProps) {
{' '}
events
</div>
<div className="flex items-center gap-2">
<div className="flex items-center justify-center gap-2">
<Button
variant="outline"
size="sm"

12
src/pages/DashboardEvents.tsx
View File

@@ -11,15 +11,15 @@ export function DashboardEvents() {
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">My Events</h1>
<h1 className="text-lg font-semibold md:text-xl truncate">My Events</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">
@@ -36,10 +36,10 @@ export function DashboardEvents() {
) : (
<div className="space-y-4">
<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">
Your Nostr events
</h2>
<p className="text-muted-foreground max-w-2xl">
<p className="text-sm md:text-base text-muted-foreground max-w-2xl">
Browse all events you have published on Nostr, search through their content,
and publish deletion requests when you want something removed.
</p>