From 0129f79ff3acc53120d248f940b712d519d2353f Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Fri, 14 Aug 2026 22:49:10 -0700
Subject: [PATCH] Polish responsive workflow layouts

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 .../workflows/ui/WorkflowFormBuilder.tsx      | 34 +++++++++++++++----
 .../features/workflows/ui/WorkflowsView.tsx   |  7 ++--
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx b/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
index b5bb4848a..3dbbb284f 100644
--- a/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowFormBuilder.tsx
@@ -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}
diff --git a/desktop/src/features/workflows/ui/WorkflowsView.tsx b/desktop/src/features/workflows/ui/WorkflowsView.tsx
index 8b5ef6417..6b8cd818c 100644
--- a/desktop/src/features/workflows/ui/WorkflowsView.tsx
+++ b/desktop/src/features/workflows/ui/WorkflowsView.tsx
@@ -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