From f24219634fc5af80c600455a91703ec694a0f061 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Wed, 9 Jul 2025 17:01:22 -0400
Subject: [PATCH] fix: mobile modal now fills 100% height/width up to 768px
 breakpoint

---
 src/uncloseai-embed-modal.js    |  2 +-
 src/uncloseai-modal-builtin.css |  2 +-
 src/uncloseai-modal-pico.css    | 24 ++++++++++++------------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js
index 3a5f006..b14a889 100644
--- a/src/uncloseai-embed-modal.js
+++ b/src/uncloseai-embed-modal.js
@@ -198,7 +198,7 @@ async function openUncloseaiEmbeddedModalNew() {
 
 	// CSS handles all styling now - no inline styles needed
 	// But we still need isMobile for some responsive text sizing
-	const isMobile = window.innerWidth <= 480;
+	const isMobile = window.innerWidth <= 768;
 
 	// Simple container with flex layout
 	const container = document.createElement("div");
diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index 9f1bd19..722655b 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -20,7 +20,7 @@ dialog#uncloseai-embedded-modal {
 }
 
 /* Mobile full-screen */
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   dialog#uncloseai-embedded-modal {
     top: 0;
     left: 0;
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 355ccba..7cb6f3c 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -34,19 +34,19 @@ dialog#uncloseai-embedded-modal[data-theme] {
 }
 
 /* Mobile full-screen - override PicoCSS for small screens */
-@media (max-width: 480px) {
+@media (max-width: 768px) {
   dialog#uncloseai-embedded-modal[data-theme] {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    max-width: 100vw;
-    max-height: 100vh;
-    transform: none;
-    border-radius: 0;
-    box-shadow: none;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    transform: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
   }
 }