fix:Added correct styling for the select options

This commit is contained in:
Prathmesh Vhatkar
2025-01-26 18:00:10 +05:30
parent 813c607440
commit 63787d1f7b

View File

@@ -511,6 +511,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
appearance: "none" as const,
}
const optionStyle = {
backgroundColor: "var(--vscode-dropdown-background)",
color: "var(--vscode-dropdown-foreground)",
}
const caretContainerStyle = {
position: "absolute" as const,
left: 6,
@@ -731,20 +736,21 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
flex: "0 0 auto",
}}>
{getAllModes(customModes).map((mode) => (
<option
key={mode.slug}
value={mode.slug}
style={{
backgroundColor: "var(--vscode-dropdown-background)",
color: "var(--vscode-dropdown-foreground)",
}}>
<option key={mode.slug} value={mode.slug} style={{ ...optionStyle }}>
{mode.name}
</option>
))}
<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
<option
disabled
style={{
borderTop: "1px solid var(--vscode-dropdown-border)",
...optionStyle,
}}>
</option>
<option value="prompts-action">Edit...</option>
<option value="prompts-action" style={{ ...optionStyle }}>
Edit...
</option>
</select>
<div style={caretContainerStyle}>
<CaretIcon />
@@ -790,10 +796,17 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
{config.name}
</option>
))}
<option disabled style={{ borderTop: "1px solid var(--vscode-dropdown-border)" }}>
<option
disabled
style={{
borderTop: "1px solid var(--vscode-dropdown-border)",
...optionStyle,
}}>
</option>
<option value="settings-action">Edit...</option>
<option value="settings-action" style={{ ...optionStyle }}>
Edit...
</option>
</select>
<div style={caretContainerStyle}>
<CaretIcon />