External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Polish responsive workflow layouts

Browse Source 
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
Taylor Ho
2026-08-14 22:49:10 -07:00
parent e9645ec383
commit 0129f79ff3
2 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
+28 -6
View File
@@ -513,7 +513,7 @@ export function WorkflowFormBuilder({
return (
<>
<div className="flex h-full min-h-0 flex-col">
<div className="flex h-full min-h-0 flex-col [container-type:inline-size]">
{parseError ? (
<p className="mx-6 mt-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
Cannot switch to form view: {parseError}
@@ -539,7 +539,7 @@ export function WorkflowFormBuilder({
</div>
) : (
<div className="flex min-h-0 flex-1 flex-col">
<div className="flex min-h-0 flex-1">
<div className="relative isolate flex min-h-0 flex-1">
<div className="min-h-0 min-w-0 flex-1 overflow-y-auto px-6 py-5">
<div className="mx-auto w-full max-w-sm">
{scopeField ? <div className="mb-3">{scopeField}</div> : null}
@@ -647,10 +647,28 @@ export function WorkflowFormBuilder({
</div>
<AnimatePresence initial={false}>
{selectedNode ? (
<motion.button
animate={{ opacity: 1 }}
aria-label="Close inspector overlay"
className="absolute inset-0 z-20 hidden bg-background/15 backdrop-blur-sm [@container(max-width:58rem)]:block"
data-testid="workflow-node-inspector-backdrop"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key="workflow-node-inspector-backdrop"
onClick={() => onSelectedNodeChange(null)}
transition={
shouldReduceMotion
? { duration: 0 }
: { duration: 0.18, ease: "easeOut" }
}
type="button"
/>
) : null}
{selectedNode ? (
<motion.aside
animate={{ opacity: 1, width: "26rem", x: 0 }}
className="flex flex-shrink-0 p-4"
className="flex flex-shrink-0 p-4 [@container(max-width:58rem)]:absolute [@container(max-width:58rem)]:inset-y-0 [@container(max-width:58rem)]:right-0 [@container(max-width:58rem)]:z-30 [@container(max-width:58rem)]:max-w-full"
data-testid="workflow-node-inspector"
exit={{ opacity: 0, width: 0, x: 24 }}
initial={{ opacity: 0, width: 0, x: 24 }}
@@ -661,8 +679,12 @@ export function WorkflowFormBuilder({
: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }
}
>
<div className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl bg-muted/40">
<div className="flex w-96 min-w-96 flex-shrink-0 items-start justify-between gap-3 px-5 pb-3 pt-5">
<div className="relative flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl bg-muted/40 [@container(max-width:58rem)]:bg-background [@container(max-width:58rem)]:shadow-2xl">
<div
aria-hidden="true"
className="pointer-events-none absolute inset-0 z-0 hidden bg-muted/40 [@container(max-width:58rem)]:block"
/>
<div className="relative z-10 flex w-96 min-w-96 flex-shrink-0 items-start justify-between gap-3 px-5 pb-3 pt-5 [@container(max-width:26rem)]:w-full [@container(max-width:26rem)]:min-w-0">
<div className="min-w-0">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
{selectedNode.type === "trigger"
@@ -733,7 +755,7 @@ export function WorkflowFormBuilder({
</div>
</div>
<div className="min-h-0 w-96 min-w-96 flex-1 overflow-y-auto px-5 pb-5 pt-2">
<div className="relative z-10 min-h-0 w-96 min-w-96 flex-1 overflow-y-auto px-5 pb-5 pt-2 [@container(max-width:26rem)]:w-full [@container(max-width:26rem)]:min-w-0">
<AnimatePresence
custom={selectionDirection}
initial={false}
desktop/src/features/workflows/ui/WorkflowsView.tsx
+5 -2
View File
@@ -43,9 +43,12 @@ type WorkflowWithChannel = {
channelName: string;
};
const WORKFLOW_CARD_GRID_CLASS =
"grid grid-cols-1 gap-3 [@container(min-width:42rem)]:grid-cols-2 [@container(min-width:63rem)]:grid-cols-3";
function WorkflowsListSkeleton() {
return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
<div className={WORKFLOW_CARD_GRID_CLASS}>
{["first", "second", "third", "fourth"].map((card) => (
<div
className="flex min-h-60 flex-col rounded-2xl border bg-card p-5"
@@ -253,7 +256,7 @@ export function WorkflowsView({
</Button>
</div>
) : (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
<div className={WORKFLOW_CARD_GRID_CLASS}>
<CreateWorkflowCard onClick={onCreateWorkflow} />
{allWorkflows.map(({ workflow, channelName }) => (
<WorkflowCard