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

fix: repair grid layout issues from conversion

Browse source 
- Use grid-auto-flow: column for horizontal button layouts
- Fix controls and message actions to display horizontally
- Add theme-aware background colors for settings panel
- Move settings panel top position to avoid covering header
- Ensure all button text stays within button boundaries
This commit is contained in:
Russell Ballestrini 2025-07-10 16:27:31 -04:00
parent a7323e68cd
commit e7f90a266d
2 changed files with 35 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -96,17 +96,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
/* Settings panel */
.uncloseai-modal-settings {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
overflow-y: auto;
position: absolute;
top: 0;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}
@ -117,13 +114,24 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
align-content: start;
}
/* Dark theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
background: rgb(26, 26, 26);
}
/* Light theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
background: rgb(255, 255, 255);
}
/* Controls */
.uncloseai-modal-controls {
padding: 8px 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 1fr);
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
@ -655,7 +663,8 @@ dialog#tts-modal {
.uncloseai-flex-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
gap: 8px;
}
@ -792,7 +801,8 @@ dialog#tts-modal {
.uncloseai-message-actions {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
opacity: 0.8;
justify-content: end;
@ -862,17 +872,14 @@ dialog#tts-modal {
/* Settings panel */
.uncloseai-modal-settings {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
overflow-y: auto;
position: absolute;
top: 0;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}

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

@ -111,17 +111,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
/* Settings panel */
.uncloseai-modal-settings {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 16px;
display: none;
overflow-y: auto;
position: absolute;
top: 0;
top: 60px;
left: 0;
right: 0;
bottom: 0;
background: var(--uncloseai-content-background, #f8f9fa);
z-index: 10;
}
@ -132,13 +129,24 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
align-content: start;
}
/* Dark theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
background: rgb(26, 26, 26);
}
/* Light theme settings panel */
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
background: rgb(255, 255, 255);
}
/* Controls */
.uncloseai-modal-controls {
padding: 8px 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 1fr);
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
@ -705,7 +713,8 @@ dialog#tts-modal {
.uncloseai-flex-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
gap: 8px;
}
@ -842,7 +851,8 @@ dialog#tts-modal {
.uncloseai-message-actions {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
opacity: 0.8;
justify-content: end;