fix: optimize model settings modal layout
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user