From 916dceafab3598afe3d4d45c7e2ef4863811e7fc Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Fri, 4 Oct 2024 03:46:31 -0400
Subject: [PATCH] Fixes

---
 .../settings/OpenRouterModelPicker.tsx        | 96 ++++++++++---------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
index fa77d57..fe0c977 100644
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
@@ -133,59 +133,61 @@ const OpenRouterModelPicker: React.FC = () => {
 				}
 				`}
 			</style>
-			<DropdownWrapper ref={dropdownRef}>
+			<div>
 				<label htmlFor="model-search">
 					<span style={{ fontWeight: 500 }}>Model</span>
 				</label>
-				<VSCodeTextField
-					id="model-search"
-					placeholder="Search and select a model..."
-					value={searchTerm}
-					onInput={(e) => {
-						handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
-						setIsDropdownVisible(true)
-					}}
-					onFocus={() => setIsDropdownVisible(true)}
-					onKeyDown={handleKeyDown}
-					style={{ width: "100%" }}>
-					{searchTerm && (
-						<div
-							className="input-icon-button codicon codicon-close"
-							aria-label="Clear search"
-							onClick={() => {
-								handleModelChange("")
-								setIsDropdownVisible(true)
-							}}
-							slot="end"
-							style={{
-								display: "flex",
-								justifyContent: "center",
-								alignItems: "center",
-								height: "100%",
-							}}
-						/>
-					)}
-				</VSCodeTextField>
-				{isDropdownVisible && (
-					<DropdownList>
-						{modelSearchResults.map((item, index) => (
-							<DropdownItem
-								key={item.id}
-								ref={(el) => (itemRefs.current[index] = el)}
-								isSelected={index === selectedIndex}
-								onMouseEnter={() => setSelectedIndex(index)}
+				<DropdownWrapper ref={dropdownRef}>
+					<VSCodeTextField
+						id="model-search"
+						placeholder="Search and select a model..."
+						value={searchTerm}
+						onInput={(e) => {
+							handleModelChange((e.target as HTMLInputElement)?.value?.toLowerCase())
+							setIsDropdownVisible(true)
+						}}
+						onFocus={() => setIsDropdownVisible(true)}
+						onKeyDown={handleKeyDown}
+						style={{ width: "100%" }}>
+						{searchTerm && (
+							<div
+								className="input-icon-button codicon codicon-close"
+								aria-label="Clear search"
 								onClick={() => {
-									handleModelChange(item.id)
-									setIsDropdownVisible(false)
+									handleModelChange("")
+									setIsDropdownVisible(true)
 								}}
-								dangerouslySetInnerHTML={{
-									__html: item.html,
+								slot="end"
+								style={{
+									display: "flex",
+									justifyContent: "center",
+									alignItems: "center",
+									height: "100%",
 								}}
 							/>
-						))}
-					</DropdownList>
-				)}
-			</DropdownWrapper>
+						)}
+					</VSCodeTextField>
+					{isDropdownVisible && (
+						<DropdownList>
+							{modelSearchResults.map((item, index) => (
+								<DropdownItem
+									key={item.id}
+									ref={(el) => (itemRefs.current[index] = el)}
+									isSelected={index === selectedIndex}
+									onMouseEnter={() => setSelectedIndex(index)}
+									onClick={() => {
+										handleModelChange(item.id)
+										setIsDropdownVisible(false)
+									}}
+									dangerouslySetInnerHTML={{
+										__html: item.html,
+									}}
+								/>
+							))}
+						</DropdownList>
+					)}
+				</DropdownWrapper>
+			</div>
 
 			{hasInfo ? (
 				<ModelInfoView
@@ -310,7 +312,7 @@ export const ModelDescriptionMarkdown = memo(
 		}, [reactContent, setIsExpanded])
 
 		return (
-			<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 5 }}>
+			<StyledMarkdown key={key} style={{ display: "inline-block", marginBottom: 0 }}>
 				<div
 					ref={textContainerRef}
 					style={{