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

This commit is contained in:
2026-04-02 19:13:31 +00:00
parent c0ac8f593a
commit c13f319474
4 changed files with 13 additions and 15 deletions

View File

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