fix: mobile modal now fills 100% height/width up to 768px breakpoint
This commit is contained in:
parent
d48b9d623f
commit
f24219634f
3 changed files with 14 additions and 14 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue