core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

fix(canvas): template layout + org card styling

Browse Source 
- 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
This commit is contained in:
Hongming Wang 2026-04-16 06:42:41 -07:00
parent 295b1fa8d9
commit 1a85ca7656
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
canvas/src/components/EmptyState.tsx
View File

@ -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 (

14
canvas/src/components/TemplatePalette.tsx
View File

@ -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>