diff --git a/packages/desktop/src-tauri/Cargo.lock b/packages/desktop/src-tauri/Cargo.lock index a8e33333..afec3062 100644 --- a/packages/desktop/src-tauri/Cargo.lock +++ b/packages/desktop/src-tauri/Cargo.lock @@ -2847,7 +2847,7 @@ dependencies = [ [[package]] name = "openchamber-desktop" -version = "1.4.1" +version = "1.4.3" dependencies = [ "anyhow", "axum", diff --git a/packages/ui/src/components/chat/ModelControls.tsx b/packages/ui/src/components/chat/ModelControls.tsx index 5f741346..ef5b6561 100644 --- a/packages/ui/src/components/chat/ModelControls.tsx +++ b/packages/ui/src/components/chat/ModelControls.tsx @@ -1870,7 +1870,7 @@ export const ModelControls: React.FC = ({ className }) => { {/* Scrollable content */} - +
{!hasResults && (
diff --git a/packages/ui/src/components/multirun/ModelMultiSelect.tsx b/packages/ui/src/components/multirun/ModelMultiSelect.tsx index 92c07844..cff0f45f 100644 --- a/packages/ui/src/components/multirun/ModelMultiSelect.tsx +++ b/packages/ui/src/components/multirun/ModelMultiSelect.tsx @@ -111,8 +111,10 @@ export const ModelMultiSelect: React.FC = ({ const [isOpen, setIsOpen] = React.useState(false); const [searchQuery, setSearchQuery] = React.useState(''); const [selectedIndex, setSelectedIndex] = React.useState(0); + const [availableHeight, setAvailableHeight] = React.useState(null); const searchInputRef = React.useRef(null); const dropdownRef = React.useRef(null); + const triggerRef = React.useRef(null); const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]); // Count occurrences of each model for display purposes @@ -193,6 +195,17 @@ export const ModelMultiSelect: React.FC = ({ const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0; + // Calculate available height when dropdown opens + React.useEffect(() => { + if (isOpen && triggerRef.current) { + const rect = triggerRef.current.getBoundingClientRect(); + // Space above trigger minus padding from top edge + const spaceAbove = rect.top - 100; + // Cap at 400px max, minimum 150px + setAvailableHeight(Math.max(150, Math.min(400, spaceAbove))); + } + }, [isOpen]); + // Focus search input when opened React.useEffect(() => { if (isOpen && searchInputRef.current) { @@ -280,6 +293,7 @@ export const ModelMultiSelect: React.FC = ({ {/* Add model button (dropdown trigger) */}
{/* Models list */} - +
{!hasResults && (
diff --git a/packages/ui/src/components/sections/agents/ModelSelector.tsx b/packages/ui/src/components/sections/agents/ModelSelector.tsx index 7d2e27d6..73b9004c 100644 --- a/packages/ui/src/components/sections/agents/ModelSelector.tsx +++ b/packages/ui/src/components/sections/agents/ModelSelector.tsx @@ -563,7 +563,7 @@ export const ModelSelector: React.FC = ({
{/* Scrollable content */} - +
{/* Not selected option */}