pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 04:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Move sliders to newline in settings to avoid horizontal scroll at normal(20-25%) window size

Browse Source
This commit is contained in:
Prathmesh Vhatkar
2025-01-29 11:57:24 +05:30
parent 4026a87d2c
commit a07f94fa19
1 changed files with 65 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
webview-ui/src/components/settings/SettingsView.tsx
View File

@@ -139,6 +139,20 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
} }
} }
const sliderLabelStyle = {
minWidth: "45px",
textAlign: "right" as const,
lineHeight: "20px",
paddingBottom: "2px",
}
const sliderStyle = {
flexGrow: 1,
maxWidth: "80%",
accentColor: "var(--vscode-button-background)",
height: "2px",
}
return ( return (
<div <div
style={{ style={{
@@ -480,22 +494,22 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
</div> </div>
<div style={{ marginBottom: 15 }}> <div style={{ marginBottom: 15 }}>
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
<span style={{ fontWeight: "500", minWidth: "100px" }}>Screenshot quality</span> <span style={{ fontWeight: "500" }}>Screenshot quality</span>
<input <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
type="range" <input
min="1" type="range"
max="100" min="1"
step="1" max="100"
value={screenshotQuality ?? 75} step="1"
onChange={(e) => setScreenshotQuality(parseInt(e.target.value))} value={screenshotQuality ?? 75}
style={{ onChange={(e) => setScreenshotQuality(parseInt(e.target.value))}
flexGrow: 1, style={{
accentColor: "var(--vscode-button-background)", ...sliderStyle,
height: "2px", }}
}} />
/> <span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
<span style={{ minWidth: "35px", textAlign: "left" }}>{screenshotQuality ?? 75}%</span> </div>
</div> </div>
<p <p
style={{ style={{
@@ -558,24 +572,20 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
<div style={{ marginBottom: 40 }}> <div style={{ marginBottom: 40 }}>
<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Advanced Settings</h3> <h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Advanced Settings</h3>
<div style={{ marginBottom: 15 }}> <div style={{ marginBottom: 15 }}>
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
<span style={{ fontWeight: "500", minWidth: "150px" }}>Terminal output limit</span> <span style={{ fontWeight: "500" }}>Terminal output limit</span>
<input <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
type="range" <input
min="100" type="range"
max="5000" min="100"
step="100" max="5000"
value={terminalOutputLineLimit ?? 500} step="100"
onChange={(e) => setTerminalOutputLineLimit(parseInt(e.target.value))} value={terminalOutputLineLimit ?? 500}
style={{ onChange={(e) => setTerminalOutputLineLimit(parseInt(e.target.value))}
flexGrow: 1, style={{ ...sliderStyle }}
accentColor: "var(--vscode-button-background)", />
height: "2px", <span style={{ ...sliderLabelStyle }}>{terminalOutputLineLimit ?? 500}</span>
}} </div>
/>
<span style={{ minWidth: "45px", textAlign: "left" }}>
{terminalOutputLineLimit ?? 500}
</span>
</div> </div>
<p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}> <p style={{ fontSize: "12px", marginTop: "5px", color: "var(--vscode-descriptionForeground)" }}>
Maximum number of lines to include in terminal output when executing commands. When exceeded Maximum number of lines to include in terminal output when executing commands. When exceeded
@@ -613,26 +623,27 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
enabled={experiments[EXPERIMENT_IDS.DIFF_STRATEGY] ?? false} enabled={experiments[EXPERIMENT_IDS.DIFF_STRATEGY] ?? false}
onChange={(enabled) => setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, enabled)} onChange={(enabled) => setExperimentEnabled(EXPERIMENT_IDS.DIFF_STRATEGY, enabled)}
/> />
<div style={{ display: "flex", alignItems: "center", gap: "5px", marginTop: "15px" }}> <div
<span style={{ fontWeight: "500", minWidth: "100px" }}>Match precision</span> style={{ display: "flex", flexDirection: "column", gap: "5px", marginTop: "15px" }}>
<input <span style={{ fontWeight: "500" }}>Match precision</span>
type="range" <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
min="0.8" <input
max="1" type="range"
step="0.005" min="0.8"
value={fuzzyMatchThreshold ?? 1.0} max="1"
onChange={(e) => { step="0.005"
setFuzzyMatchThreshold(parseFloat(e.target.value)) value={fuzzyMatchThreshold ?? 1.0}
}} onChange={(e) => {
style={{ setFuzzyMatchThreshold(parseFloat(e.target.value))
flexGrow: 1, }}
accentColor: "var(--vscode-button-background)", style={{
height: "2px", ...sliderStyle,
}} }}
/> />
<span style={{ minWidth: "35px", textAlign: "left" }}> <span style={{ ...sliderLabelStyle }}>
{Math.round((fuzzyMatchThreshold || 1) * 100)}% {Math.round((fuzzyMatchThreshold || 1) * 100)}%
</span> </span>
</div>
</div> </div>
<p <p
style={{ style={{