diff --git a/src/pages/AiProvidersPage.module.scss b/src/pages/AiProvidersPage.module.scss index 3e48eec..a109e90 100644 --- a/src/pages/AiProvidersPage.module.scss +++ b/src/pages/AiProvidersPage.module.scss @@ -57,11 +57,7 @@ $openai-toolbar-control-height: 36px; .openaiProviderList { display: grid; gap: $spacing-md; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - - @media (min-width: 1400px) { - grid-template-columns: repeat(3, 1fr); - } + grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); @include mobile { grid-template-columns: 1fr; @@ -78,6 +74,7 @@ $openai-toolbar-control-height: 36px; align-items: stretch; gap: $spacing-sm; min-height: 0; + min-width: 0; } .openaiProviderMeta { @@ -456,6 +453,7 @@ $openai-toolbar-control-height: 36px; align-items: baseline; gap: 6px; margin-bottom: 4px; + min-width: 0; font-size: 13px; line-height: 1.4; } @@ -470,6 +468,9 @@ $openai-toolbar-control-height: 36px; .fieldValue { color: var(--text-primary); font-weight: 600; + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; word-break: break-all; font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace; } @@ -480,22 +481,30 @@ $openai-toolbar-control-height: 36px; flex-wrap: wrap; gap: 6px; margin-top: 6px; + min-width: 0; + max-width: 100%; } .headerBadge { display: inline-flex; align-items: center; gap: 4px; + flex-wrap: wrap; + min-width: 0; + max-width: 100%; background: var(--accent-tertiary, #f3f4f6); border: 1px solid var(--border-primary); border-radius: 12px; padding: 4px 10px; font-size: 12px; color: var(--text-secondary); + overflow-wrap: anywhere; + word-break: break-word; strong { font-weight: 600; color: var(--text-primary); + flex-shrink: 0; } } @@ -506,6 +515,8 @@ $openai-toolbar-control-height: 36px; gap: 6px; margin-top: 8px; align-items: center; + min-width: 0; + max-width: 100%; } .modelCountLabel { @@ -525,6 +536,8 @@ $openai-toolbar-control-height: 36px; align-items: center; gap: 4px; flex-wrap: wrap; + min-width: 0; + max-width: 100%; background: var(--bg-quinary, #f8f9fa); color: var(--text-secondary); border: 1px solid var(--border-secondary); @@ -542,12 +555,16 @@ $openai-toolbar-control-height: 36px; .modelName { font-weight: 600; color: var(--text-primary); + min-width: 0; + max-width: 100%; overflow-wrap: anywhere; } .modelAlias { color: var(--text-tertiary); font-style: italic; + min-width: 0; + max-width: 100%; overflow-wrap: anywhere; &::before { @@ -581,6 +598,8 @@ $openai-toolbar-control-height: 36px; // API密钥条目列表(二级卡片) .apiKeyEntriesSection { margin-top: 10px; + min-width: 0; + max-width: 100%; } .apiKeyEntriesLabel { @@ -594,6 +613,8 @@ $openai-toolbar-control-height: 36px; display: flex; flex-direction: column; gap: 6px; + min-width: 0; + max-width: 100%; } .apiKeyEntryCard { @@ -601,6 +622,8 @@ $openai-toolbar-control-height: 36px; flex-wrap: wrap; align-items: center; gap: 8px; + min-width: 0; + max-width: 100%; padding: 8px 12px; background: var(--bg-secondary, #f9fafb); border: 1px solid var(--border-secondary); @@ -626,12 +649,19 @@ $openai-toolbar-control-height: 36px; font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace; font-weight: 600; color: var(--text-primary); + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; word-break: break-all; } .apiKeyEntryProxy { color: var(--text-tertiary); font-size: 11px; + min-width: 0; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; &::before { content: '| Proxy: ';