engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: settings panel now fills entire modal using CSS Grid

Browse source 
- Changed settings panel from flex to CSS Grid layout
- When open, settings panel covers the entire modal with absolute positioning
- Uses grid-template-columns: 1fr with 20px gap and align-content: start
- Added background color and z-index for proper overlay behavior
- Updated both PicoCSS and built-in CSS versions
This commit is contained in:
Russell Ballestrini 2025-07-10 13:15:32 -04:00
parent 4517e280fa
commit 8c61e7e8e4
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/uncloseai-modal-builtin.css
View file

@ -99,17 +99,25 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
/* Settings panel */
.uncloseai-modal-settings {
flex-shrink: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
max-height: 40vh;
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}
.uncloseai-modal-settings.open {
display: block;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-content: start;
}
/* Controls */
@ -863,17 +871,25 @@ dialog#tts-modal {
/* Settings panel */
.uncloseai-modal-settings {
flex-shrink: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
max-height: 40vh;
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}
.uncloseai-modal-settings.open {
display: block;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-content: start;
}
/* Form inputs in modal */

14
src/uncloseai-modal-pico.css
View file

@ -114,17 +114,25 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
/* Settings panel */
.uncloseai-modal-settings {
flex-shrink: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
max-height: 40vh;
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}
.uncloseai-modal-settings.open {
display: block;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-content: start;
}
/* Controls */