fix(appdash): use banner height CSS variable for terminal layout and expose terminal resize handling

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-02 - 3.50.1 - fix(appdash)
+use banner height CSS variable for terminal layout and expose terminal resize handling
+
+- Removes manual terminal top offset updates in the app dashboard and relies on the shared --banner-area-height CSS variable instead.
+- Drops fixed max-width and max-height calculations so the terminal can size more reliably within its container.
+- Makes the workspace terminal resize handler public to support external resize coordination.
+
 ## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
 add global message banners with actions and dismissal support
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.50.0',
+  version: '3.50.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -644,11 +644,6 @@ export class DeesSimpleAppDash extends DeesElement {
       const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
       const height = bannerArea ? bannerArea.offsetHeight : 0;
       maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
-
-      // Keep terminal in sync with banner height
-      if (this.currentTerminal) {
-        this.currentTerminal.style.top = `${height}px`;
-      }
     });
   }
 
@@ -710,11 +705,9 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.setupCommand = this.terminalSetupCommand;
     this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
-    const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
-    const bannerHeight = bannerArea ? bannerArea.offsetHeight : 0;
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '10';
-    terminal.style.top = `${bannerHeight}px`;
+    terminal.style.top = 'var(--banner-area-height, 0px)';
     terminal.style.left = '240px';
     terminal.style.right = '0px';
     terminal.style.bottom = '24px';
@@ -722,8 +715,6 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
     terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
-    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px - 240px)`;
-    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px - ${bannerHeight}px)`;
     
     // Add close button to terminal
     terminal.addEventListener('close', () => this.closeTerminal());

ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts

@@ -106,11 +106,11 @@ export class DeesWorkspaceTerminal extends DeesElement {
     css`
       :host {
         background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        position: absolute;
-        height: 100%;
-        width: 100%;
         display: flex;
         flex-direction: row;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
       }
 
       * {
@@ -596,7 +596,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
     tab.terminal.focus();
   }
 
-  private handleResize(): void {
+  public handleResize(): void {
     if (this.activeTabId) {
       const tab = this.tabManager.getTab(this.activeTabId);
       if (tab) {