From f87f59c19452538fcee19d05adcc1a5ba0fd9ace Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 10 Jul 2025 22:20:50 -0400
Subject: [PATCH] fix: reset heading styles to prevent blog site CSS
 interference

- 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
---
 src/uncloseai-modal-builtin.css | 23 +++++++++++++++++++++++
 src/uncloseai-modal-pico.css    | 23 +++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index cbdf6c2..00a251b 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -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%;
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 1ac150d..2a6c12d 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -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;