jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-12 12:22:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix responsive layout breakpoints for small window sizes (#426)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Wes
2026-04-29 14:20:01 -06:00
committed by GitHub
parent d38c55a120
commit 8d5949dcc4
7 changed files with 387 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
desktop/src/shared/ui/ViewLoadingFallback.tsx
View File

@@ -128,56 +128,38 @@ function AgentsLoadingBody() {
function WorkflowsLoadingBody() {
return (
<div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
<div className="mb-4 flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Skeleton className="h-6 w-28" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
<Skeleton className="h-9 w-36 rounded-lg" />
</div>
<div className="space-y-2">
{["first", "second", "third", "fourth"].map((card) => (
<Card className="p-4" key={card}>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1 space-y-3">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-44" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
<Skeleton className="h-4 w-full max-w-2xl" />
<div className="flex flex-wrap gap-2">
<Skeleton className="h-5 w-20 rounded-full" />
<Skeleton className="h-5 w-24 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
</div>
<div className="hidden shrink-0 gap-2 sm:flex">
<Skeleton className="h-8 w-8 rounded-lg" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
</div>
</Card>
))}
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto p-4">
<div className="mb-4 flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Skeleton className="h-6 w-28" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
<Skeleton className="h-9 w-36 rounded-lg" />
</div>
<div className="hidden w-[400px] shrink-0 border-l border-border/60 bg-background/70 lg:block">
<div className="space-y-4 p-4">
<div className="space-y-2">
<Skeleton className="h-5 w-40" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-4/5" />
</div>
<Skeleton className="h-40 w-full rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-28" />
<Skeleton className="h-16 w-full rounded-xl" />
<Skeleton className="h-16 w-full rounded-xl" />
</div>
</div>
<div className="space-y-2">
{["first", "second", "third", "fourth"].map((card) => (
<Card className="p-4" key={card}>
<div className="flex items-start justify-between gap-4">
<div className="min-w-0 flex-1 space-y-3">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-44" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
<Skeleton className="h-4 w-full max-w-2xl" />
<div className="flex flex-wrap gap-2">
<Skeleton className="h-5 w-20 rounded-full" />
<Skeleton className="h-5 w-24 rounded-full" />
<Skeleton className="h-5 w-16 rounded-full" />
</div>
</div>
<div className="hidden shrink-0 gap-2 sm:flex">
<Skeleton className="h-8 w-8 rounded-lg" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
</div>
</Card>
))}
</div>
</div>
);