diff --git a/js/components/components.css b/js/components/components.css index e697fa3..e04d8da 100644 --- a/js/components/components.css +++ b/js/components/components.css @@ -215,6 +215,8 @@ .sage-textarea { width: 100%; padding: 8px; + min-height: 32px; + line-height: 1.4; background: #333; color: #fff; border: 1px solid #555; @@ -282,8 +284,6 @@ .sage-checkbox-label { cursor: pointer; - color: #fff; - font-size: 12px; user-select: none; } @@ -435,7 +435,6 @@ } .sage-dropdown-menu, -.cache-dropdown-menu, .cache-dropdown-submenu { position: fixed; left: var(--cache-dropdown-left, 0); @@ -455,7 +454,7 @@ box-sizing: border-box; } -.cache-dropdown-menu.open, +.sage-dropdown-menu.open, .cache-dropdown-submenu.open { display: block; } @@ -921,8 +920,7 @@ .sage-progress-label, .sage-progress-dialog-msg, -.sage-inline-progress-message, -.sage-progress-status-text { +.sage-inline-progress-message { color: #fff; font-size: 12px; } @@ -1183,12 +1181,6 @@ overflow: hidden; } -.sage-batch-progress-fill { - width: 0%; - height: 100%; - background: linear-gradient(90deg, #4CAF50, #66BB6A); - transition: width 0.3s ease; -} .sage-flex-container { display: flex; @@ -1664,12 +1656,6 @@ border: 1px solid #444; } -.dialog-confirm-message { - margin: 0 0 10px 0; - font-size: 14px; - line-height: 1.5; -} - .dialog-feedback-button-success { background: #4CAF50; } diff --git a/js/components/layout.js b/js/components/layout.js index 317e018..16a08d5 100644 --- a/js/components/layout.js +++ b/js/components/layout.js @@ -38,6 +38,7 @@ export function createFlexContainer(options = {}) { direction = 'row', justify = 'flex-start', align = 'stretch', + alignItems = null, gap = '0', wrap = false, padding = '0', @@ -47,6 +48,8 @@ export function createFlexContainer(options = {}) { children = [] } = options; + const effectiveAlign = alignItems || align; + loadComponentStyles(); const container = document.createElement('div'); @@ -55,7 +58,7 @@ export function createFlexContainer(options = {}) { container.style.setProperty('--sage-flex-direction', direction); container.style.setProperty('--sage-flex-justify', justify); - container.style.setProperty('--sage-flex-align', align); + container.style.setProperty('--sage-flex-align', effectiveAlign); container.style.setProperty('--sage-flex-gap', gap); container.style.setProperty('--sage-flex-wrap', wrap ? 'wrap' : 'nowrap'); container.style.setProperty('--sage-flex-padding', padding); diff --git a/js/sidebar/llmTab/styles/llmStyles.css b/js/sidebar/llmTab/styles/llmStyles.css index 4d7a238..600fd9c 100644 --- a/js/sidebar/llmTab/styles/llmStyles.css +++ b/js/sidebar/llmTab/styles/llmStyles.css @@ -118,10 +118,18 @@ .llm-selection-row { display: flex; gap: 8px; - align-items: flex-end; + align-items: center; margin-bottom: 8px; } + .llm-selection-row .llm-btn { + height: 100%; + } + + .llm-selection-row .llm-select { + min-height: 32px; + } + .llm-selection-row:last-child { margin-bottom: 0; } diff --git a/js/sidebar/modelsTabV2.js b/js/sidebar/modelsTabV2.js index f452823..dd77f95 100644 --- a/js/sidebar/modelsTabV2.js +++ b/js/sidebar/modelsTabV2.js @@ -111,7 +111,7 @@ function createHeaderAndControls(onRefresh, onScan, onReport) { // Create sort controls const sortContainer = createFlexContainer({ gap: '8px', - alignItems: 'center', + align: 'center', styles: { marginBottom: '8px' // Space before search input } @@ -133,7 +133,9 @@ function createHeaderAndControls(onRefresh, onScan, onReport) { { value: 'type', text: 'Folder Type' } ], style: { - flex: '1' + flex: '1', + minHeight: '36px', + marginBottom: '0' } }); @@ -148,7 +150,13 @@ function createHeaderAndControls(onRefresh, onScan, onReport) { title: 'Toggle sort direction', styles: { minWidth: '40px', - padding: '6px 8px' + minHeight: '36px', + padding: '0 10px', + marginBottom: '0', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center' } });