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

fix: reset heading styles to prevent blog site CSS interference

Browse source 
- Add CSS rules to reset all padding and margin for h1-h6 inside our modals
- Prevents blog site heading styles like 'padding-top: 30px' from breaking modal layouts
- Applied to all three modals: uncloseai-embedded-modal, tts-modal, translate-modal
This commit is contained in:
Russell Ballestrini 2025-07-10 22:20:50 -04:00
parent 78e4a80f36
commit f87f59c194
2 changed files with 46 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/uncloseai-modal-builtin.css
View file

@ -837,6 +837,29 @@ dialog#tts-modal {
/* EMBED MODAL SPECIFIC STYLES */
/* =================================================================== */
/* Reset blog site heading styles that might interfere with our modals */
dialog#uncloseai-embedded-modal h1,
dialog#uncloseai-embedded-modal h2,
dialog#uncloseai-embedded-modal h3,
dialog#uncloseai-embedded-modal h4,
dialog#uncloseai-embedded-modal h5,
dialog#uncloseai-embedded-modal h6,
dialog#tts-modal h1,
dialog#tts-modal h2,
dialog#tts-modal h3,
dialog#tts-modal h4,
dialog#tts-modal h5,
dialog#tts-modal h6,
dialog#translate-modal h1,
dialog#translate-modal h2,
dialog#translate-modal h3,
dialog#translate-modal h4,
dialog#translate-modal h5,
dialog#translate-modal h6 {
padding: 0 !important;
margin: 0 !important;
}
/* Main modal container and layout */
.uncloseai-modal-container {
width: 100%;

23
src/uncloseai-modal-pico.css
View file

@ -905,6 +905,29 @@ dialog#tts-modal {
/* EMBED MODAL SPECIFIC STYLES - PICOCSS OVERRIDES */
/* =================================================================== */
/* Reset blog site heading styles that might interfere with our modals */
dialog#uncloseai-embedded-modal h1,
dialog#uncloseai-embedded-modal h2,
dialog#uncloseai-embedded-modal h3,
dialog#uncloseai-embedded-modal h4,
dialog#uncloseai-embedded-modal h5,
dialog#uncloseai-embedded-modal h6,
dialog#tts-modal h1,
dialog#tts-modal h2,
dialog#tts-modal h3,
dialog#tts-modal h4,
dialog#tts-modal h5,
dialog#tts-modal h6,
dialog#translate-modal h1,
dialog#translate-modal h2,
dialog#translate-modal h3,
dialog#translate-modal h4,
dialog#translate-modal h5,
dialog#translate-modal h6 {
padding: 0 !important;
margin: 0 !important;
}
/* Main modal container and layout */
.uncloseai-modal-container {
width: 100% !important;