diff --git a/custom_components/google_assistant_entity_console/manifest.json b/custom_components/google_assistant_entity_console/manifest.json index 7372f9a..9bcb4e3 100644 --- a/custom_components/google_assistant_entity_console/manifest.json +++ b/custom_components/google_assistant_entity_console/manifest.json @@ -8,5 +8,5 @@ "iot_class": "local_polling", "config_flow": true, "requirements": [], - "version": "3.0.0" + "version": "3.0.1" } diff --git a/custom_components/google_assistant_entity_console/static/panel.js b/custom_components/google_assistant_entity_console/static/panel.js index 3a17943..e02493e 100644 --- a/custom_components/google_assistant_entity_console/static/panel.js +++ b/custom_components/google_assistant_entity_console/static/panel.js @@ -19,13 +19,15 @@ if (!customElements.get('google-assistant-entity-console-panel')) { connectedCallback() { this.style.display = 'block'; - this.style.position = 'absolute'; - this.style.top = '0'; - this.style.left = '0'; + this.style.position = 'relative'; this.style.width = '100%'; - this.style.height = '100%'; + this.style.maxWidth = '100%'; + this.style.height = 'calc(100vh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))'; this.style.overflow = 'hidden'; this.style.boxSizing = 'border-box'; + this.style.isolation = 'isolate'; + this.style.zIndex = '1'; + this.style.contain = 'layout paint'; window.addEventListener('message', this._messageListener); } diff --git a/docs/screenshots/sidebar_frame_contained.png b/docs/screenshots/sidebar_frame_contained.png new file mode 100644 index 0000000..50d288b Binary files /dev/null and b/docs/screenshots/sidebar_frame_contained.png differ diff --git a/tests/test_playwright_e2e.py b/tests/test_playwright_e2e.py index 06d80c5..830e818 100644 --- a/tests/test_playwright_e2e.py +++ b/tests/test_playwright_e2e.py @@ -507,4 +507,76 @@ def handle_migrate_yaml(route): assert saved_payloads[0]["auto_sync"] is False +def test_ha_drawer_sidebar_frame_containment(static_server): + """Verify google-assistant-entity-console-panel stays strictly inside ha-drawer .app-content and does not bleed beneath the 256px sidebar.""" + with sync_playwright() as p: + try: + browser = p.chromium.launch(headless=True) + except Exception as e: + pytest.skip(f"Chromium browser could not be launched: {e}") + + context = browser.new_context(viewport={"width": 1440, "height": 900}) + pg = context.new_page() + panel_js = (STATIC_DIR / "panel.js").read_text(encoding="utf-8") + + pg.set_content( + """ + + + + + + +
+ +
+ +
+
+ + + """ + ) + pg.add_script_tag(content=panel_js) + rect = pg.evaluate( + """() => { + const container = document.getElementById("haPanelCustom"); + const el = document.createElement("google-assistant-entity-console-panel"); + container.appendChild(el); + const r = el.getBoundingClientRect(); + return { x: r.x, y: r.y, width: r.width, height: r.height, position: getComputedStyle(el).position }; + }""" + ) + assert rect["position"] == "relative" + assert rect["x"] == 256 + assert rect["width"] == 1184 + assert rect["height"] == 900 + + context.close() + browser.close() + +