From 44917ceffd650452481dfac39fcf5470b194e711 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Wed, 9 Jul 2025 18:32:07 -0400 Subject: [PATCH] docs: update journal entry with mobile experience fix --- journal.rst | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/journal.rst b/journal.rst index 0aa6860..9c46f9c 100644 --- a/journal.rst +++ b/journal.rst @@ -218,12 +218,25 @@ if (!document.querySelector(`link[href*="${cssFile}"]`)) { - Desktop: Centered modal with 70vw width, 800px max-width - Mobile (≤480px): Full-screen modal for touch interfaces +**Phase 5: Mobile Experience Restoration** + +After initial deployment, discovered the mobile experience was broken - modals weren't filling the full screen on mobile devices. Fixed by: + +1. **Added `!important` declarations** to mobile media query overrides in PicoCSS stylesheet +2. **Increased mobile breakpoint** from 480px to 768px to properly cover tablets and larger phones +3. **Updated JavaScript detection** to match CSS breakpoint (768px) for consistency + +**Final Mobile Responsiveness:** +- Desktop (>768px): Centered modal with 70vw width, 800px max-width +- Mobile/Tablet (≤768px): Full-screen modal (100vw × 100vh) for optimal touch experience + **Results** ✅ **Modal Sizing Fixed**: No more full-screen modals on large displays ✅ **CSS Architecture Clean**: All inline styles moved to dedicated CSS files ✅ **Cross-Site Compatibility**: Consistent behavior on blog sites and PicoCSS sites ✅ **Translation Pages Fixed**: Proper CSS loading in new window contexts +✅ **Mobile Experience Restored**: Full-screen modals on phones and tablets ✅ **Developer Experience**: Maintainable CSS architecture with clear separation of concerns This refactoring resolved the immediate user experience issues while establishing a robust, maintainable CSS architecture that prevents similar problems in the future. \ No newline at end of file