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

51
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,8 +494,9 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
</div> </div>
<div style={{ marginBottom: 15 }}> <div style={{ marginBottom: 15 }}>
<div style={{ display: "flex", flexDirection: "column", gap: "5px" }}>
<span style={{ fontWeight: "500" }}>Screenshot quality</span>
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}> <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
<span style={{ fontWeight: "500", minWidth: "100px" }}>Screenshot quality</span>
<input <input
type="range" type="range"
min="1" min="1"
@@ -490,12 +505,11 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
value={screenshotQuality ?? 75} value={screenshotQuality ?? 75}
onChange={(e) => setScreenshotQuality(parseInt(e.target.value))} onChange={(e) => setScreenshotQuality(parseInt(e.target.value))}
style={{ style={{
flexGrow: 1, ...sliderStyle,
accentColor: "var(--vscode-button-background)",
height: "2px",
}} }}
/> />
<span style={{ minWidth: "35px", textAlign: "left" }}>{screenshotQuality ?? 75}%</span> <span style={{ ...sliderLabelStyle }}>{screenshotQuality ?? 75}%</span>
</div>
</div> </div>
<p <p
style={{ style={{
@@ -558,8 +572,9 @@ 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", flexDirection: "column", gap: "5px" }}>
<span style={{ fontWeight: "500" }}>Terminal output limit</span>
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}> <div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
<span style={{ fontWeight: "500", minWidth: "150px" }}>Terminal output limit</span>
<input <input
type="range" type="range"
min="100" min="100"
@@ -567,15 +582,10 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
step="100" step="100"
value={terminalOutputLineLimit ?? 500} value={terminalOutputLineLimit ?? 500}
onChange={(e) => setTerminalOutputLineLimit(parseInt(e.target.value))} onChange={(e) => setTerminalOutputLineLimit(parseInt(e.target.value))}
style={{ style={{ ...sliderStyle }}
flexGrow: 1,
accentColor: "var(--vscode-button-background)",
height: "2px",
}}
/> />
<span style={{ minWidth: "45px", textAlign: "left" }}> <span style={{ ...sliderLabelStyle }}>{terminalOutputLineLimit ?? 500}</span>
{terminalOutputLineLimit ?? 500} </div>
</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,8 +623,10 @@ 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" }}>
<span style={{ fontWeight: "500" }}>Match precision</span>
<div style={{ display: "flex", alignItems: "center", gap: "5px" }}>
<input <input
type="range" type="range"
min="0.8" min="0.8"
@@ -625,15 +637,14 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
setFuzzyMatchThreshold(parseFloat(e.target.value)) setFuzzyMatchThreshold(parseFloat(e.target.value))
}} }}
style={{ style={{
flexGrow: 1, ...sliderStyle,
accentColor: "var(--vscode-button-background)",
height: "2px",
}} }}
/> />
<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={{
fontSize: "12px", fontSize: "12px",