BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): let fixed-width controls scale with font size and density (#2320)

Browse Source
This commit is contained in:
Serhii Dziupin
2026-08-06 19:54:33 +00:00
parent fe331c093b
commit c006f96811
7 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/agents/AgentsPage.tsx
+2 -2
View File
@@ -445,7 +445,7 @@ export const AgentsPage: React.FC = () => {
inputMode="decimal" inputMode="decimal"
placeholder="—" placeholder="—"
emptyLabel="—" emptyLabel="—"
className="w-16" className="w-20"
/> />
{temperature !== undefined && ( {temperature !== undefined && (
<Button <Button
@@ -483,7 +483,7 @@ export const AgentsPage: React.FC = () => {
inputMode="decimal" inputMode="decimal"
placeholder="—" placeholder="—"
emptyLabel="—" emptyLabel="—"
className="w-16" className="w-20"
/> />
{topP !== undefined && ( {topP !== undefined && (
<Button <Button
packages/ui/src/components/sections/behavior/BehaviorPage.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { toast } from '@/components/ui'; import { toast } from '@/components/ui';
import { useI18n, type I18nKey } from '@/lib/i18n'; import { useI18n, type I18nKey } from '@/lib/i18n';
import { cn } from '@/lib/utils';
import { reportSettingsSaveState } from '@/lib/persistence'; import { reportSettingsSaveState } from '@/lib/persistence';
import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs'; import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
import { import {
@@ -379,7 +380,7 @@ export const BehaviorPage: React.FC = () => {
onValueChange={(value) => setResponseStylePreset(value)} onValueChange={(value) => setResponseStylePreset(value)}
disabled={isLoading || !responseStyleEnabled} disabled={isLoading || !responseStyleEnabled}
> >
<SelectTrigger size={SETTINGS_SELECT_SIZE} className={SETTINGS_SELECT_ROW_TRIGGER_CLASS}> <SelectTrigger size={SETTINGS_SELECT_SIZE} className={cn(SETTINGS_SELECT_ROW_TRIGGER_CLASS, 'max-w-72')}>
<SelectValue> <SelectValue>
{(value) => { {(value) => {
if (value === 'custom') return t('settings.behavior.page.responseStyle.option.custom'); if (value === 'custom') return t('settings.behavior.page.responseStyle.option.custom');
packages/ui/src/components/sections/openchamber/KeyboardShortcutsSettings.tsx
+2 -1
View File
@@ -260,6 +260,7 @@ export const KeyboardShortcutsSettings: React.FC = () => {
<SettingsFieldRow <SettingsFieldRow
label={actionLabel(action.id, action.label)} label={actionLabel(action.id, action.label)}
alignEnd={false} alignEnd={false}
controlClassName="@xl:w-auto @xl:flex-1"
> >
<Input <Input
readOnly readOnly
@@ -295,7 +296,7 @@ export const KeyboardShortcutsSettings: React.FC = () => {
setPendingOverwrite(null); setPendingOverwrite(null);
setErrorText(''); setErrorText('');
}} }}
className="h-7 w-40 min-w-0 typography-ui-label text-center" className="h-7 min-w-40 max-w-full field-sizing-content typography-ui-label text-center"
/> />
<Button <Button
type="button" type="button"
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+7 -2
View File
@@ -1280,7 +1280,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
controlClassName="w-full" controlClassName="w-full"
> >
<Select value={uiFont} onValueChange={(value) => setUiFont(value as UiFontOption)}> <Select value={uiFont} onValueChange={(value) => setUiFont(value as UiFontOption)}>
<SelectTrigger aria-label={t('settings.openchamber.visual.field.selectInterfaceFontAria')} size={SETTINGS_SELECT_SIZE} className={SETTINGS_SELECT_TRIGGER_CLASS}> <SelectTrigger aria-label={t('settings.openchamber.visual.field.selectInterfaceFontAria')} size={SETTINGS_SELECT_SIZE} className={cn(SETTINGS_SELECT_TRIGGER_CLASS, 'max-w-full')}>
<SelectValue>{UI_FONT_OPTIONS.find((option) => option.id === uiFont)?.label}</SelectValue> <SelectValue>{UI_FONT_OPTIONS.find((option) => option.id === uiFont)?.label}</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1310,7 +1310,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
controlClassName="w-full" controlClassName="w-full"
> >
<Select value={monoFont} onValueChange={(value) => setMonoFont(value as MonoFontOption)}> <Select value={monoFont} onValueChange={(value) => setMonoFont(value as MonoFontOption)}>
<SelectTrigger aria-label={t('settings.openchamber.visual.field.selectCodeFontAria')} size={SETTINGS_SELECT_SIZE} className={SETTINGS_SELECT_TRIGGER_CLASS}> <SelectTrigger aria-label={t('settings.openchamber.visual.field.selectCodeFontAria')} size={SETTINGS_SELECT_SIZE} className={cn(SETTINGS_SELECT_TRIGGER_CLASS, 'max-w-full')}>
<SelectValue>{CODE_FONT_OPTIONS.find((option) => option.id === monoFont)?.label}</SelectValue> <SelectValue>{CODE_FONT_OPTIONS.find((option) => option.id === monoFont)?.label}</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -1351,6 +1351,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
min={50} min={50}
max={200} max={200}
step={5} step={5}
className="w-20"
aria-label={t('settings.openchamber.visual.field.fontSizePercentageAria')} aria-label={t('settings.openchamber.visual.field.fontSizePercentageAria')}
/> />
<span className={SETTINGS_NUMBER_UNIT_CLASS}>%</span> <span className={SETTINGS_NUMBER_UNIT_CLASS}>%</span>
@@ -1381,6 +1382,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
min={9} min={9}
max={52} max={52}
step={1} step={1}
className="w-20"
/> />
<span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span> <span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span>
<Button size="sm" <Button size="sm"
@@ -1410,6 +1412,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
min={9} min={9}
max={32} max={32}
step={1} step={1}
className="w-20"
/> />
<span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span> <span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span>
<Button size="sm" <Button size="sm"
@@ -1444,6 +1447,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
min={50} min={50}
max={200} max={200}
step={5} step={5}
className="w-20"
/> />
<span className={SETTINGS_NUMBER_UNIT_CLASS}>%</span> <span className={SETTINGS_NUMBER_UNIT_CLASS}>%</span>
<Button size="sm" <Button size="sm"
@@ -1474,6 +1478,7 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
min={0} min={0}
max={100} max={100}
step={5} step={5}
className="w-20"
/> />
<span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span> <span className={SETTINGS_NUMBER_UNIT_CLASS}>px</span>
<Button size="sm" <Button size="sm"
packages/ui/src/components/sections/openchamber/SessionRetentionSettings.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export const SessionRetentionSettings: React.FC = () => {
max={MAX_DAYS} max={MAX_DAYS}
step={1} step={1}
aria-label={t('settings.openchamber.sessionRetention.field.retentionPeriodAria')} aria-label={t('settings.openchamber.sessionRetention.field.retentionPeriodAria')}
className="w-20 tabular-nums" className="w-24 tabular-nums"
/> />
<span className="typography-ui-label text-muted-foreground">{t('settings.openchamber.sessionRetention.field.days')}</span> <span className="typography-ui-label text-muted-foreground">{t('settings.openchamber.sessionRetention.field.days')}</span>
<Button <Button
packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
+2 -2
View File
@@ -1051,13 +1051,13 @@ export const VoiceSettings: React.FC = () => {
{/* Speech Rate */} {/* Speech Rate */}
<SettingsFieldRow label={t('settings.voice.page.field.speechRate')}> <SettingsFieldRow label={t('settings.voice.page.field.speechRate')}>
{!isMobile && <input type="range" min={0.5} max={2} step={0.1} value={speechRate} onChange={(e) => setSpeechRate(Number(e.target.value))} className={sliderClass} />} {!isMobile && <input type="range" min={0.5} max={2} step={0.1} value={speechRate} onChange={(e) => setSpeechRate(Number(e.target.value))} className={sliderClass} />}
<NumberInput value={speechRate} onValueChange={setSpeechRate} min={0.5} max={2} step={0.1} className="w-16 tabular-nums" /> <NumberInput value={speechRate} onValueChange={setSpeechRate} min={0.5} max={2} step={0.1} className="w-20 tabular-nums" />
</SettingsFieldRow> </SettingsFieldRow>
{/* Speech Pitch */} {/* Speech Pitch */}
<SettingsFieldRow label={t('settings.voice.page.field.speechPitch')}> <SettingsFieldRow label={t('settings.voice.page.field.speechPitch')}>
{!isMobile && <input type="range" min={0.5} max={2} step={0.1} value={speechPitch} onChange={(e) => setSpeechPitch(Number(e.target.value))} className={sliderClass} />} {!isMobile && <input type="range" min={0.5} max={2} step={0.1} value={speechPitch} onChange={(e) => setSpeechPitch(Number(e.target.value))} className={sliderClass} />}
<NumberInput value={speechPitch} onValueChange={setSpeechPitch} min={0.5} max={2} step={0.1} className="w-16 tabular-nums" /> <NumberInput value={speechPitch} onValueChange={setSpeechPitch} min={0.5} max={2} step={0.1} className="w-20 tabular-nums" />
</SettingsFieldRow> </SettingsFieldRow>
{/* Speech Volume */} {/* Speech Volume */}
packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
+5 -5
View File
@@ -2053,7 +2053,7 @@ export const RemoteInstancesPage: React.FC = () => {
min={5} min={5}
max={240} max={240}
step={1} step={1}
className="w-16 tabular-nums" className="w-20 tabular-nums"
value={draft.connectionTimeoutSec} value={draft.connectionTimeoutSec}
onValueChange={(next) => { onValueChange={(next) => {
updateDraft((current) => ({ updateDraft((current) => ({
@@ -2111,7 +2111,7 @@ export const RemoteInstancesPage: React.FC = () => {
min={1} min={1}
max={65535} max={65535}
step={1} step={1}
className="w-20 tabular-nums" className="w-32 tabular-nums"
value={draft.remoteOpenchamber.preferredPort} value={draft.remoteOpenchamber.preferredPort}
onValueChange={(next) => { onValueChange={(next) => {
updateDraft((current) => ({ updateDraft((current) => ({
@@ -2251,7 +2251,7 @@ export const RemoteInstancesPage: React.FC = () => {
min={1} min={1}
max={65535} max={65535}
step={1} step={1}
className="w-20 tabular-nums" className="w-32 tabular-nums"
value={draft.localForward.preferredLocalPort} value={draft.localForward.preferredLocalPort}
onValueChange={(next) => { onValueChange={(next) => {
updateDraft((current) => ({ updateDraft((current) => ({
@@ -2481,7 +2481,7 @@ export const RemoteInstancesPage: React.FC = () => {
min={1} min={1}
max={65535} max={65535}
step={1} step={1}
className="w-16 tabular-nums" className="w-32 tabular-nums"
value={forward.localPort} value={forward.localPort}
onValueChange={(next) => { onValueChange={(next) => {
updateForward((item) => ({ updateForward((item) => ({
@@ -2523,7 +2523,7 @@ export const RemoteInstancesPage: React.FC = () => {
min={1} min={1}
max={65535} max={65535}
step={1} step={1}
className="w-16 tabular-nums" className="w-32 tabular-nums"
value={forward.remotePort} value={forward.remotePort}
onValueChange={(next) => { onValueChange={(next) => {
updateForward((item) => ({ updateForward((item) => ({