From de0438fed6cd5b04c12bf270c3f98dbee8d6ab28 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 20 Aug 2026 12:18:59 +0000
Subject: [PATCH] feat(studio): horizontal split for the Workers empty state

Rework the empty state into a single card with a horizontal split: the
EmptyStatePresentational icon/title/description/CTA stays on the left (its own
border/background stripped so the outer wrapper is the only visible card
chrome), and the quickstart PromptPanel sits fixed-width on the right. Stacks
vertically below lg.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XQ5b58nwfCGsifA7PCheQb
---
 .../interfaces/Workers/WorkersEmptyState.tsx  | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx b/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx
index 40e703a5a3e..b9976733a2c 100644
--- a/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx
+++ b/apps/studio/components/interfaces/Workers/WorkersEmptyState.tsx
@@ -16,33 +16,35 @@ export const WorkersEmptyState = ({ onCreate }: WorkersEmptyStateProps) => {
   const { can: canDeployWorkers } = useAsyncCheckPermissions(PermissionAction.FUNCTIONS_WRITE, '*')
 
   return (
-    <EmptyStatePresentational
-      icon={BoxPlus}
-      title="Deploy your first worker"
-      description="Run backend workers in microVMs next to your database. Dockerfile, Node.js and Deno supported at Private Alpha."
-      className="gap-y-8 py-12"
-    >
-      <ButtonTooltip
-        variant="primary"
-        size="tiny"
-        icon={<Plus size={14} />}
-        disabled={!canDeployWorkers}
-        onClick={onCreate}
-        tooltip={{
-          content: {
-            side: 'bottom',
-            text: canDeployWorkers ? undefined : 'You need additional permissions to deploy workers',
-          },
-        }}
+    <div className="flex flex-col items-center gap-y-8 rounded-lg border border-dashed bg-surface-100 px-6 py-10 lg:flex-row lg:items-center lg:justify-center lg:gap-x-16 lg:px-12">
+      {/* Main content + CTA — same EmptyStatePresentational, stripped of its own card chrome so the outer wrapper is the only visible border. */}
+      <EmptyStatePresentational
+        icon={BoxPlus}
+        title="Deploy your first worker"
+        description="Run backend workers in microVMs next to your database. Dockerfile, Node.js and Deno supported at Private Alpha."
+        className="w-full border-0 bg-transparent p-0 lg:w-auto"
       >
-        Deploy worker
-      </ButtonTooltip>
+        <ButtonTooltip
+          variant="primary"
+          size="tiny"
+          icon={<Plus size={14} />}
+          disabled={!canDeployWorkers}
+          onClick={onCreate}
+          tooltip={{
+            content: {
+              side: 'bottom',
+              text: canDeployWorkers ? undefined : 'You need additional permissions to deploy workers',
+            },
+          }}
+        >
+          Deploy worker
+        </ButtonTooltip>
+      </EmptyStatePresentational>
 
-      {/* Capped at 600px and centered regardless of how wide the container grows. */}
-      <div className="mx-auto flex w-full max-w-[600px] flex-col items-center gap-y-3 pt-2">
-        <p className="text-sm text-foreground-light">Or quickstart a worker with a snippet</p>
+      <div className="flex w-full flex-col items-center gap-y-3 lg:w-[440px] lg:shrink-0">
+        <p className="text-sm text-foreground-light">Quickstart with a snippet</p>
         <WorkerPromptPanel input={EXAMPLE_WORKER} className="w-full text-left" />
       </div>
-    </EmptyStatePresentational>
+    </div>
   )
 }