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 { .settings-panel {
width: min(920px, 100%); width: min(920px, 100%);
max-height: min(90vh, 900px); max-height: min(calc(100dvh - 40px), 900px);
overflow: auto; display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-sidebar); background: var(--bg-sidebar);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
@@ -138,6 +140,7 @@ export function getAssetsHtml(): string {
gap: 16px; gap: 16px;
padding: 20px 24px; padding: 20px 24px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
flex-shrink: 0;
} }
.settings-header h2 { .settings-header h2 {
@@ -154,12 +157,15 @@ export function getAssetsHtml(): string {
.settings-body { .settings-body {
padding: 20px 24px 8px; padding: 20px 24px 8px;
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px; gap: 16px;
min-height: 0;
overflow-y: auto;
} }
.executor-settings-card { .executor-settings-card {
min-width: 0;
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
@@ -218,6 +224,13 @@ export function getAssetsHtml(): string {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 10px; gap: 10px;
min-width: 0;
}
.settings-field-row .select-input,
.settings-field > .search-input {
width: 100%;
min-width: 0;
} }
.settings-help { .settings-help {
@@ -239,6 +252,7 @@ export function getAssetsHtml(): string {
gap: 12px; gap: 12px;
padding: 16px 24px 24px; padding: 16px 24px 24px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
flex-shrink: 0;
} }
.settings-actions { .settings-actions {
@@ -709,6 +723,9 @@ export function getAssetsHtml(): string {
.settings-field-row { .settings-field-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.settings-body {
grid-template-columns: 1fr;
}
.settings-footer { .settings-footer {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
+8
View File
@@ -205,6 +205,14 @@ printf '%s\\n' '{"providers":[{"name":"test-provider","models":["test-model"]}]}
expect(res.body).toContain("手动输入模型"); 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 () => { it("serves model discovery config endpoint", async () => {
const res = await makeRequest(`${baseUrl}/api/config/models`); const res = await makeRequest(`${baseUrl}/api/config/models`);
expect(res.status).toBe(200); expect(res.status).toBe(200);