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