fix: optimize model settings modal layout

This commit is contained in:
liujing
2026-07-20 21:17:20 +08:00
parent 04df7bf47f
commit 925d34aeb7
2 changed files with 29 additions and 4 deletions
+21 -4
View File
@@ -123,8 +123,10 @@ export function getAssetsHtml(): string {
.settings-panel {
width: min(920px, 100%);
max-height: min(90vh, 900px);
overflow: auto;
max-height: min(calc(100dvh - 40px), 900px);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: 12px;
@@ -138,6 +140,7 @@ export function getAssetsHtml(): string {
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.settings-header h2 {
@@ -154,12 +157,15 @@ export function getAssetsHtml(): string {
.settings-body {
padding: 20px 24px 8px;
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
min-height: 0;
overflow-y: auto;
}
.executor-settings-card {
min-width: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
@@ -218,6 +224,13 @@ export function getAssetsHtml(): string {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
min-width: 0;
}
.settings-field-row .select-input,
.settings-field > .search-input {
width: 100%;
min-width: 0;
}
.settings-help {
@@ -239,6 +252,7 @@ export function getAssetsHtml(): string {
gap: 12px;
padding: 16px 24px 24px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.settings-actions {
@@ -709,6 +723,9 @@ export function getAssetsHtml(): string {
.settings-field-row {
grid-template-columns: 1fr;
}
.settings-body {
grid-template-columns: 1fr;
}
.settings-footer {
flex-direction: column;
align-items: stretch;
+8
View File
@@ -205,6 +205,14 @@ printf '%s\\n' '{"providers":[{"name":"test-provider","models":["test-model"]}]}
expect(res.body).toContain("手动输入模型");
});
it("uses a responsive grid with body-only scrolling for model settings", async () => {
const res = await makeRequest(`${baseUrl}/`);
expect(res.status).toBe(200);
expect(res.body).toMatch(/\.settings-panel\s*\{[^}]*display: flex;[^}]*flex-direction: column;[^}]*overflow: hidden;/);
expect(res.body).toMatch(/\.settings-body\s*\{[^}]*display: grid;[^}]*grid-template-columns: repeat\(auto-fit, minmax\(260px, 1fr\)\);[^}]*overflow-y: auto;/);
expect(res.body).toMatch(/@media \(max-width: 768px\)[\s\S]*?\.settings-body\s*\{\s*grid-template-columns: 1fr;/);
});
it("serves model discovery config endpoint", async () => {
const res = await makeRequest(`${baseUrl}/api/config/models`);
expect(res.status).toBe(200);