fix: mobile modal now fills 100% height/width up to 768px breakpoint

This commit is contained in:
Russell Ballestrini 2025-07-09 17:01:22 -04:00
parent d48b9d623f
commit f24219634f
3 changed files with 14 additions and 14 deletions

View file

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

View file

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

View file

@ -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;
}
}