fix: add !important to PicoCSS overrides to force proper modal sizing

This commit is contained in:
Russell Ballestrini 2025-07-09 16:00:25 -04:00
parent b46aedcdf3
commit 121d79d838

View file

@ -1,21 +1,21 @@
/* UncloseAI Modal - PicoCSS Override Styles */
/* Override PicoCSS dialog styles with higher specificity */
dialog#uncloseai-embedded-modal {
dialog#uncloseai-embedded-modal[data-theme] {
/* Override PicoCSS positioning that sets top:0, left:0, right:0, bottom:0 */
position: fixed;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
/* Override PicoCSS sizing that sets min-width:100%, min-height:100% */
width: 70vw;
max-width: 800px;
height: 90vh;
min-width: auto;
min-height: auto;
width: 70vw !important;
max-width: 800px !important;
height: 90vh !important;
min-width: auto !important;
min-height: auto !important;
/* Override PicoCSS defaults */
margin: 0;
@ -35,7 +35,7 @@ dialog#uncloseai-embedded-modal {
/* Mobile full-screen - override PicoCSS for small screens */
@media (max-width: 480px) {
dialog#uncloseai-embedded-modal {
dialog#uncloseai-embedded-modal[data-theme] {
top: 0;
left: 0;
right: 0;