fix(dees-workspace): fix demo wrapper and workspace layout; always render terminal preview

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>
       `;
     }