fix(web): improve settings dialog scroll behavior (#667)

* fix(web): improve settings dialog scroll behavior

- Remove double scroll containers by changing modal-body overflow from auto to hidden, letting only settings-content handle scrolling

- Add min-height: 0 to settings-content and settings-sidebar to allow proper shrinking in grid layout

- Add overscroll-behavior: contain to prevent scroll chaining (scroll bleed-through to parent page)

- Add overflow-y: auto to settings-sidebar for cases where navigation items exceed viewport height

These changes fix the nested scroll issue that caused confusing scroll behavior and prevent content overflow on smaller viewports.

* fix(i18n): add missing Ukrainian translations for promptTemplates

Add promptTemplates.allSources and promptTemplates.sourceFilterAria translations to fix TypeScript error.
This commit is contained in:
Jie Zhu 2026-05-06 20:09:17 +08:00 committed by GitHub
parent 26636384a8
commit dbd28b79c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 1 deletions

View file

@ -167,6 +167,8 @@ export const uk: Dict = {
'promptTemplates.allSources': 'Усі джерела',
'promptTemplates.sourceFilterAria': 'Фільтрувати за джерелом',
'promptTemplates.retry': 'Повторити',
'promptTemplates.allSources': 'Усі джерела',
'promptTemplates.sourceFilterAria': 'Фільтр за джерелом',
'connectors.title': 'Конектори',
'connectors.subtitle': 'Локальні та майбутні джерела даних, які можуть живити live-артефакти.',

View file

@ -1119,7 +1119,7 @@ code {
.modal-settings { max-height: 90vh; }
}
.modal-settings .modal-body {
overflow-y: auto;
overflow: hidden;
flex: 1;
min-height: 0;
display: grid;
@ -1172,6 +1172,9 @@ code {
padding: 22px 12px;
background: var(--bg-subtle);
border-right: 1px solid var(--border);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.settings-nav-item {
width: 100%;
@ -1221,8 +1224,10 @@ code {
}
.settings-content {
min-width: 0;
min-height: 0;
padding: 22px var(--modal-padding);
overflow: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: 18px;
@ -1237,6 +1242,7 @@ code {
.settings-sidebar {
flex-direction: row;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 10px 12px;
border-right: 0;
border-bottom: 1px solid var(--border);