fix: replace slider step number input with pill presets

packages/web/src/components/modals/instanceSettingsPanels/StreamingPanel.tsx

@@ -240,22 +240,24 @@ export function StreamingPanel() {
             </div>
           </div>
 
-          {/* Bitrate Step — compact inline row */}
+          {/* Bitrate Step — pill presets */}
-          <div className="flex items-center gap-2 pt-1 border-t border-white/[0.04]">
+          <div className="pt-2 border-t border-white/[0.04]">
-            <span className="text-[11px] text-txt-tertiary">Slider step</span>
+            <div className="text-[11px] text-txt-tertiary mb-1.5">Slider Step</div>
-            <input
+            <div className="flex flex-wrap gap-1">
-              type="number"
+              {[100, 250, 500, 1000, 2500, 5000].map((step) => (
-              min={50}
+                <button
-              max={5000}
+                  key={step}
-              step={50}
+                  onClick={() => setDraft({ ...draft, bitrateStepKbps: step })}
-              value={draft.bitrateStepKbps}
+                  className={`px-2 py-0.5 rounded text-[11px] font-medium transition-colors cursor-pointer select-none ${
-              onChange={(e) => {
+                    draft.bitrateStepKbps === step
-                const v = Number(e.target.value);
+                      ? 'bg-accent-primary text-white'
-                if (v >= 50 && v <= 5000) setDraft({ ...draft, bitrateStepKbps: v });
+                      : 'bg-surface-elevated text-txt-secondary hover:bg-interactive-hover'
-              }}
+                  }`}
-              className="input-standard w-16 px-1.5 py-0.5 text-xs text-center"
+                >
-            />
+                  {step >= 1000 ? `${step / 1000} Mbps` : `${step} kbps`}
-            <span className="text-[11px] text-txt-tertiary">kbps</span>
+                </button>
+              ))}
+            </div>
           </div>
         </div>
       </div>