Merge pull request #577 from psv2522/fix-issue-562

fix:Added correct styling for the select options
This commit is contained in:
Matt Rubens
2025-01-26 08:46:38 -05:00
committed by GitHub

View File

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