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

fix: improve settings panel and button overflow issues

Browse source 
- Increase settings panel top offset from 60px to 80px to avoid header
- Remove max-height: 40vh restriction on settings panel
- Add overflow hidden and text-overflow ellipsis to buttons
- Change grid-auto-columns to minmax(0, max-content) for proper sizing
- Ensure buttons don't expand beyond their content width
This commit is contained in:
Russell Ballestrini 2025-07-10 16:34:33 -04:00
parent e7f90a266d
commit e2b413917f
3 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/.uncloseai-modal-pico.css.swp Normal file
View file

Binary file not shown.

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

@ -100,7 +100,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
display: none;
overflow-y: auto;
position: absolute;
top: 60px;
top: 80px;
left: 0;
right: 0;
bottom: 0;
@ -131,7 +131,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 1fr);
grid-auto-columns: minmax(0, max-content);
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
@ -693,6 +693,9 @@ dialog#tts-modal {
color: var(--uncloseai-primary-text, #495057);
transition: all 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.uncloseai-btn-primary:hover {
@ -876,7 +879,7 @@ dialog#tts-modal {
display: none;
overflow-y: auto;
position: absolute;
top: 60px;
top: 80px;
left: 0;
right: 0;
bottom: 0;

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

@ -115,7 +115,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
display: none;
overflow-y: auto;
position: absolute;
top: 60px;
top: 80px;
left: 0;
right: 0;
bottom: 0;
@ -146,7 +146,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 1fr);
grid-auto-columns: minmax(0, max-content);
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
@ -268,7 +268,7 @@ dialog#translate-modal {
border: none;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: white;
/*background: white;*/
overflow: auto;
/* Override PicoCSS flex layout */
@ -743,6 +743,9 @@ dialog#tts-modal {
color: var(--uncloseai-primary-text, #495057);
transition: all 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.uncloseai-btn-primary:hover {
@ -925,7 +928,6 @@ dialog#tts-modal {
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding: 16px !important;
display: none !important;
max-height: 40vh !important;
overflow-y: auto !important;
}
@ -1262,4 +1264,4 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
.widget-translate-dropdown .option:hover {
background: #f5f5f5;
}
}