diff --git a/apps/desktop/e2e/launch-packaged-app.spec.ts b/apps/desktop/e2e/launch-packaged-app.spec.ts index cfb4202d33026..a8083f0e5cee7 100644 --- a/apps/desktop/e2e/launch-packaged-app.spec.ts +++ b/apps/desktop/e2e/launch-packaged-app.spec.ts @@ -46,6 +46,46 @@ test('renderer loads and shows DOM content', async () => { expect(childCount).toBeGreaterThan(0) }) +test('HUD composer remains fully inside the transparent window', async () => { + const hudPagePromise = fixture!.app.waitForEvent('window') + + await fixture!.page.evaluate(() => + (window as typeof window & { + hermesDesktop?: { hud?: { open: (options: { sessionId: null }) => Promise } } + }).hermesDesktop?.hud?.open({ sessionId: null }) + ) + + const hudPage = await hudPagePromise + await hudPage.waitForSelector('[data-slot="composer-rich-input"]', { state: 'visible' }) + + const geometry = await hudPage.evaluate(() => { + const dock = document.querySelector('[data-slot="composer-dock"]') + const input = document.querySelector('[data-slot="composer-rich-input"]') + + if (!dock || !input) { + throw new Error('HUD composer did not render') + } + + const dockRect = dock.getBoundingClientRect() + const inputRect = input.getBoundingClientRect() + + return { + viewportWidth: window.innerWidth, + dockLeft: dockRect.left, + dockRight: dockRect.right, + inputLeft: inputRect.left, + inputRight: inputRect.right, + } + }) + + expect(geometry.dockLeft).toBeGreaterThanOrEqual(0) + expect(geometry.inputLeft).toBeGreaterThanOrEqual(0) + expect(geometry.dockRight).toBeLessThanOrEqual(geometry.viewportWidth) + expect(geometry.inputRight).toBeLessThanOrEqual(geometry.viewportWidth) + + await hudPage.close() +}) + test('boot progress overlay fades out or shows error state', async () => { const page = fixture!.page await page.waitForFunction( diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css index 66c42fe9da12c..ff24c509d8af0 100644 --- a/apps/desktop/src/styles.css +++ b/apps/desktop/src/styles.css @@ -2715,7 +2715,11 @@ button[data-slot='aui_msg-reactions'] svg { width: 100% !important; max-width: none !important; transform: none !important; - translate: none !important; + /* Keep this value indirect. Lightning CSS folds literal identity values into + `transform: translate(0)`, which does not override Tailwind's standalone + `translate: -50%`; the dock then starts half a HUD width off-screen. */ + --hud-composer-translate: 0; + translate: var(--hud-composer-translate) !important; padding: 0 !important; }