fix: add !important to PicoCSS overrides to force proper modal sizing
This commit is contained in:
parent
b46aedcdf3
commit
121d79d838
1 changed files with 13 additions and 13 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue