diff --git a/web/app/(app)/workflows/[id]/page.tsx b/web/app/(app)/workflows/[id]/page.tsx
index d35a455..f2b783c 100644
--- a/web/app/(app)/workflows/[id]/page.tsx
+++ b/web/app/(app)/workflows/[id]/page.tsx
@@ -302,14 +302,14 @@ export default function WorkflowBuilder() {
 
     return (
         <>
-            <div className="flex items-center gap-3 border-b border-border bg-surface px-4 py-3">
+            <div className="flex flex-wrap items-center gap-3 border-b border-border bg-surface px-4 py-3">
                 <span className="h-2.5 w-2.5 rounded-full bg-signal" />
                 <div className="flex items-center gap-1.5 text-sm">
                     <span className="text-text-secondary">Workflows /</span>
                     <span className="font-medium text-text-primary">{wf.name}</span>
                     <span className="text-text-secondary">· {saving ? "Saving…" : lastSaved ? `Saved ${timeAgo(lastSaved)}` : ""}</span>
                 </div>
-                <div className="ml-auto flex items-center gap-2">
+                <div className="ml-auto flex flex-wrap items-center gap-2">
                     <span className="rounded-full border border-border bg-surface-2 px-3 py-1 text-xs text-text-secondary">{wf.target_server_ids.length} servers</span>
                     <Link href={`/workflows/${id}/runs`} className="rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary">
                         Runs
@@ -326,9 +326,9 @@ export default function WorkflowBuilder() {
             {error && <div className="border-b border-danger/30 bg-danger/10 px-4 py-2 text-sm text-danger">{error}</div>}
             {notice && <div className="border-b border-signal/30 bg-signal/10 px-4 py-2 text-sm text-signal">{notice}</div>}
 
-            <div className="grid h-[calc(100vh-53px)] grid-cols-[1fr_320px]">
+            <div className="flex flex-1 flex-col lg:grid lg:h-[calc(100dvh-53px)] lg:grid-cols-[1fr_320px]">
                 {/* CENTER: canvas */}
-                <main className="overflow-auto bg-background bg-[radial-gradient(circle_at_1px_1px,theme(colors.border)_1px,transparent_0)] bg-[length:22px_22px] p-8">
+                <main className="overflow-auto bg-background bg-[radial-gradient(circle_at_1px_1px,theme(colors.border)_1px,transparent_0)] bg-[length:22px_22px] p-4 sm:p-6 lg:p-8">
                     <div className="pointer-events-none sticky top-0 z-10 flex justify-center pt-4">
                         <button
                             onClick={() => setPickerOpen(true)}
@@ -337,7 +337,7 @@ export default function WorkflowBuilder() {
                             <span className="text-base leading-none">+</span> Add step
                         </button>
                     </div>
-                    <div className="mx-auto flex w-[340px] flex-col items-center">
+                    <div className="mx-auto flex w-full max-w-[340px] flex-col items-center">
                         <DropZone pos={0} />
                         {sortedSteps.map((ref, i) => {
                             const lib = libById(ref.step_id);
@@ -369,7 +369,7 @@ export default function WorkflowBuilder() {
                                             e.dataTransfer.setData("text/plain", JSON.stringify({ kind: "move", from: i }));
                                         }}
                                         onClick={() => setSelected(i)}
-                                        className={`w-[340px] cursor-pointer rounded border bg-surface p-3 ${isSelected ? "border-signal ring-2 ring-signal/40" : "border-border"}`}
+                                        className={`w-full cursor-pointer rounded border bg-surface p-3 ${isSelected ? "border-signal ring-2 ring-signal/40" : "border-border"}`}
                                     >
                                         <div className="mb-2 flex items-center gap-2">
                                             <span className="grid h-5 w-5 place-items-center rounded border border-border font-mono text-[10px] text-text-secondary">{i + 1}</span>
@@ -400,7 +400,11 @@ export default function WorkflowBuilder() {
                 </main>
 
                 {/* RIGHT: inspector */}
-                <aside className="overflow-auto border-l border-border bg-surface p-4">
+                <aside
+                    className={`overflow-auto border-border bg-surface p-4 lg:block lg:border-l ${
+                        selected === null || !selectedRef ? "hidden" : "block border-t max-lg:max-h-[60dvh]"
+                    }`}
+                >
                     {selected === null || !selectedRef ? (
                         <p className="text-sm text-text-secondary">Select a step to configure it.</p>
                     ) : (