From 1a85ca765699d13f8dd2c3423e9c7fe847fde6ec Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Thu, 16 Apr 2026 06:42:41 -0700
Subject: [PATCH] fix(canvas): template layout + org card styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wider modal (max-w-2xl), 3-col grid, no max-height clipping
- Org template cards: violet→blue, consistent rounded-xl styling
- Container scrolls vertically instead of cutting off
---
 canvas/src/components/EmptyState.tsx      |  6 +++---
 canvas/src/components/TemplatePalette.tsx | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/canvas/src/components/EmptyState.tsx b/canvas/src/components/EmptyState.tsx
index ebaa0289..998d88c0 100644
--- a/canvas/src/components/EmptyState.tsx
+++ b/canvas/src/components/EmptyState.tsx
@@ -79,8 +79,8 @@ export function EmptyState() {
   };
 
   return (
-    <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-[1]">
-      <div className="relative max-w-xl rounded-3xl border border-zinc-800/70 bg-zinc-950/80 backdrop-blur-xl px-8 py-8 text-center shadow-2xl shadow-black/40 pointer-events-auto">
+    <div className="absolute inset-0 flex items-start justify-center pointer-events-none z-[1] overflow-y-auto py-8">
+      <div className="relative max-w-2xl w-full rounded-3xl border border-zinc-800/70 bg-zinc-950/80 backdrop-blur-xl px-8 py-8 text-center shadow-2xl shadow-black/40 pointer-events-auto mx-4">
         <div className="absolute inset-x-8 top-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
 
         {/* Logo */}
@@ -107,7 +107,7 @@ export function EmptyState() {
         {loading ? (
           <div className="text-xs text-zinc-400 py-4">Loading templates...</div>
         ) : templates.length > 0 ? (
-          <div className="grid grid-cols-2 gap-2.5 mb-4 text-left max-h-[240px] overflow-y-auto">
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 mb-4 text-left">
             {templates.map((t) => {
               const tierColor = TIER_COLORS[t.tier] || TIER_COLORS[1];
               return (
diff --git a/canvas/src/components/TemplatePalette.tsx b/canvas/src/components/TemplatePalette.tsx
index 12cb9fdf..e94f6363 100644
--- a/canvas/src/components/TemplatePalette.tsx
+++ b/canvas/src/components/TemplatePalette.tsx
@@ -112,25 +112,25 @@ export function OrgTemplatesSection() {
         return (
           <div
             key={o.dir}
-            className="bg-zinc-800/30 border border-zinc-700/40 rounded-lg p-2.5"
+            className="bg-zinc-900/50 border border-zinc-800/60 rounded-xl p-3 hover:border-zinc-700/60 transition-all"
           >
-            <div className="flex items-center justify-between mb-0.5">
-              <span className="text-[11px] font-semibold text-zinc-200 truncate">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-[12px] font-semibold text-zinc-200 truncate">
                 {o.name || o.dir}
               </span>
-              <span className="text-[9px] font-mono text-violet-400 bg-violet-950/40 px-1.5 py-0.5 rounded shrink-0">
-                {o.workspaces}w
+              <span className="text-[9px] font-mono text-sky-400 bg-sky-950/40 px-1.5 py-0.5 rounded-md shrink-0">
+                {o.workspaces} workspaces
               </span>
             </div>
             {o.description && (
-              <p className="text-[10px] text-zinc-500 mb-2 line-clamp-2 leading-relaxed">
+              <p className="text-[10px] text-zinc-500 mb-2.5 line-clamp-2 leading-relaxed">
                 {o.description}
               </p>
             )}
             <button
               onClick={() => handleImport(o)}
               disabled={isImporting}
-              className="w-full px-2 py-1 bg-violet-600/20 hover:bg-violet-600/30 border border-violet-500/30 rounded text-[10px] text-violet-300 font-medium transition-colors disabled:opacity-50"
+              className="w-full px-2 py-1.5 bg-blue-600/20 hover:bg-blue-600/30 border border-blue-500/30 rounded-lg text-[10px] text-blue-300 font-medium transition-colors disabled:opacity-50"
             >
               {isImporting ? "Importing…" : "Import org"}
             </button>