engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reset host page header/div/nav styles inside modal, force header full width

Browse source
This commit is contained in:
russell@unturf.com 2026-02-24 15:55:52 -05:00
parent 615c84c15e
commit 854df0d2da
3 changed files with 32 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
public/src/uncloseai-embed-modal.js
View file

@ -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 <header> 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";

13
public/src/uncloseai-modal-builtin.css
View file

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

13
public/src/uncloseai-modal-pico.css
View file

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