From 20a95224fd38178172c8f4de3a75245cea1e464b Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Wed, 9 Jul 2025 16:04:49 -0400 Subject: [PATCH] fix: use actual PicoCSS presence detection instead of USE_CUSTOM_STYLING flag - Change CSS loading logic to detect actual PicoCSS link tags on page - Blog sites without PicoCSS now correctly load uncloseai-modal-builtin.css - PicoCSS sites load uncloseai-modal-pico.css with proper overrides - Fix modal appearing full-screen on blog sites that don't use PicoCSS --- src/tts-modal.js | 7 +++++-- src/uncloseai-embed-modal.js | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/tts-modal.js b/src/tts-modal.js index c9ec4c4..6dc095e 100644 --- a/src/tts-modal.js +++ b/src/tts-modal.js @@ -5,8 +5,11 @@ import { handleTTS, downloadAudio, generateTitleForTTS } from "./tts.js"; export function openTTSModal() { // Load appropriate CSS based on whether we're using PicoCSS or built-in styles - const USE_CUSTOM_STYLING = window.UNCLOSEAI_CUSTOM_STYLING !== false; - const cssFile = USE_CUSTOM_STYLING ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css'; + // Detect if PicoCSS is actually present on the page + const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null; + + // Load appropriate CSS based on actual PicoCSS presence + const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css'; if (!document.querySelector(`link[href*="${cssFile}"]`)) { const link = document.createElement('link'); diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js index 4c8382f..3b8cb5e 100644 --- a/src/uncloseai-embed-modal.js +++ b/src/uncloseai-embed-modal.js @@ -172,8 +172,11 @@ function refreshModalUI() { } async function openUncloseaiEmbeddedModalNew() { - // Load appropriate CSS based on whether we're using PicoCSS or built-in styles - const cssFile = USE_CUSTOM_STYLING ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css'; + // Detect if PicoCSS is actually present on the page + const hasPicoCSS = document.querySelector('link[href*="pico"]') !== null; + + // Load appropriate CSS based on actual PicoCSS presence + const cssFile = hasPicoCSS ? 'uncloseai-modal-pico.css' : 'uncloseai-modal-builtin.css'; if (!document.querySelector(`link[href*="${cssFile}"]`)) { const link = document.createElement('link');