diff --git a/.playwright-mcp/dees-workspace-demo-4k.png b/.playwright-mcp/dees-workspace-demo-4k.png
new file mode 100644
index 0000000..43a5940
Binary files /dev/null and b/.playwright-mcp/dees-workspace-demo-4k.png differ
diff --git a/changelog.md b/changelog.md
index 7315a1a..83c9d56 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-12-31 - 3.20.1 - fix(dees-workspace)
+fix demo wrapper and workspace layout; always render terminal preview
+
+- Import @design.estate/dees-wcctools/demotools and wrap demo content in <dees-demowrapper>
+- Create an absolute-positioned container so the dees-workspace fills 100% height/width
+- Always render dees-workspace-terminal-preview (use empty command when none) to avoid conditional rendering issues
+- Set a fixed height (200px) for the terminal preview in the initializing state
+- Add Playwright demo asset .playwright-mcp/dees-workspace-demo-4k.png
+
 ## 2025-12-31 - 3.20.0 - feat(workspace)
 rename editor components to workspace group and move terminal & TypeScript intellisense into workspace
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 38a7561..d728226 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.20.0',
+  version: '3.20.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
diff --git a/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts b/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
index c84ede4..b7aaa3c 100644
--- a/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
@@ -22,6 +22,7 @@ import '../../dees-icon/dees-icon.js';
 import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
 import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '@design.estate/dees-wcctools/demotools';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -174,13 +175,19 @@ testSmartPromise();
       await env.mount(fileTree);
     })();
 
+    // Create container element for proper 100% height like dees-appui-base
+    const containerElement = document.createElement('div');
+    containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';
+
+    const workspaceElement = document.createElement('dees-workspace') as DeesWorkspace;
+    workspaceElement.executionEnvironment = env;
+    workspaceElement.initializationPromise = mountPromise;
+    containerElement.appendChild(workspaceElement);
+
     return html`
-      <div style="width: 100%; height: 600px; position: relative;">
-        <dees-workspace
-          .executionEnvironment=${env}
-          .initializationPromise=${mountPromise}
-        ></dees-workspace>
-      </div>
+      <dees-demowrapper>
+        ${containerElement}
+      </dees-demowrapper>
     `;
   };
 
@@ -662,6 +669,7 @@ testSmartPromise();
         margin-top: 24px;
         width: 80%;
         max-width: 600px;
+        height: 200px;
       }
 
       dees-workspace-filetree {
@@ -702,12 +710,10 @@ testSmartPromise();
         <div class="initializing">
           <dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
           <span>Initializing workspace...</span>
-          ${this.initCommand ? html`
-            <dees-workspace-terminal-preview
-              .command=${this.initCommand}
-              .lines=${this.initOutput}
-            ></dees-workspace-terminal-preview>
-          ` : ''}
+          <dees-workspace-terminal-preview
+            .command=${this.initCommand || ''}
+            .lines=${this.initOutput}
+          ></dees-workspace-terminal-preview>
         </div>
       `;
     }