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
This commit is contained in:
Russell Ballestrini 2025-07-09 16:04:49 -04:00
parent 121d79d838
commit 20a95224fd
2 changed files with 10 additions and 4 deletions

View file

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

View file

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