From 854df0d2dac4695643cb587d60ad68dfdf1f9ccf Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Tue, 24 Feb 2026 15:55:52 -0500 Subject: [PATCH] reset host page header/div/nav styles inside modal, force header full width --- public/src/uncloseai-embed-modal.js | 11 ++++++----- public/src/uncloseai-modal-builtin.css | 13 +++++++++++++ public/src/uncloseai-modal-pico.css | 13 +++++++++++++ 3 files changed, 32 insertions(+), 5 deletions(-) diff --git a/public/src/uncloseai-embed-modal.js b/public/src/uncloseai-embed-modal.js index dabfccf..29c96f4 100644 --- a/public/src/uncloseai-embed-modal.js +++ b/public/src/uncloseai-embed-modal.js @@ -274,21 +274,22 @@ async function openUncloseaiEmbeddedModalNew() { const modal = document.createElement("dialog"); modal.id = "uncloseai-embedded-modal"; modal.setAttribute("data-theme", theme); - // Force inline resets so host page dialog/article styles can't push content inward - modal.style.cssText = - "padding:0;margin:0;border:none;max-width:none;max-height:none;overflow:hidden;"; + // Force inline resets so host page dialog styles can't push content inward + modal.style.cssText = "padding:0;margin:0;border:none;overflow:hidden;"; // CSS handles all styling now - no inline styles needed // But we still need isMobile for some responsive text sizing const isMobile = window.innerWidth <= 768; - // Simple container with flex layout + // Simple container with grid layout const container = document.createElement("div"); container.className = "uncloseai-modal-container"; + container.style.cssText = "width:100%;height:100%;box-sizing:border-box;"; - // Header + // Header - inline width:100% to beat host page
styles const header = document.createElement("header"); header.className = "uncloseai-modal-header"; + header.style.cssText = "width:100%;max-width:none;box-sizing:border-box;"; const titleContainer = document.createElement("div"); titleContainer.className = "uncloseai-title-container"; diff --git a/public/src/uncloseai-modal-builtin.css b/public/src/uncloseai-modal-builtin.css index 8d5defe..4ecc5df 100644 --- a/public/src/uncloseai-modal-builtin.css +++ b/public/src/uncloseai-modal-builtin.css @@ -919,6 +919,19 @@ dialog#translate-modal button { box-sizing: border-box; } +/* Reset host page header/nav/section/div styles that leak into our modals */ +dialog#uncloseai-embedded-modal header, +dialog#uncloseai-embedded-modal nav, +dialog#uncloseai-embedded-modal section, +dialog#uncloseai-embedded-modal div { + max-width: none; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + box-sizing: border-box; +} + /* API Configuration Styles */ .uncloseai-toggle-container { display: block; diff --git a/public/src/uncloseai-modal-pico.css b/public/src/uncloseai-modal-pico.css index 72699dc..4ce2b6a 100644 --- a/public/src/uncloseai-modal-pico.css +++ b/public/src/uncloseai-modal-pico.css @@ -989,6 +989,19 @@ dialog#translate-modal button { box-sizing: border-box; } +/* Reset host page header/nav/section/div styles that leak into our modals */ +dialog#uncloseai-embedded-modal header, +dialog#uncloseai-embedded-modal nav, +dialog#uncloseai-embedded-modal section, +dialog#uncloseai-embedded-modal div { + max-width: none; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + box-sizing: border-box; +} + /* API Configuration Styles */ .uncloseai-toggle-container { display: block;