From 4890b16b499857abac25fa1834dccc16f83f9718 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Wed, 19 Nov 2025 17:13:03 +0100
Subject: [PATCH] feat: improve safeguard threshold field (#11004)

---
 .../MilestoneProgressionTimeInput.tsx                |  3 +--
 .../ReleasePlan/SafeguardForm/SafeguardForm.tsx      | 12 +++++++-----
 .../ReleasePlan/hooks/useMilestoneProgressionForm.ts |  9 +++------
 .../ModeSelector/ModeSelector.tsx                    |  2 +-
 .../RangeSelector/RangeSelector.tsx                  |  2 +-
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
index 321a445300..870d6e51f0 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/MilestoneProgressionForm/MilestoneProgressionTimeInput.tsx
@@ -75,8 +75,7 @@ export const MilestoneProgressionTimeInput = ({
     return (
         <StyledInputGroup>
             <StyledTextField
-                type='text'
-                inputMode='numeric'
+                type='number'
                 value={timeValue}
                 onChange={onTimeValueChange}
                 onPaste={handleNumericPaste}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
index 7505576bbb..a275cc5b88 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
@@ -244,7 +244,6 @@ export const SafeguardForm = ({
                 <StyledLabel>filtered by</StyledLabel>
                 <FormControl variant='outlined' size='small'>
                     <StyledSelect
-                        sx={{ minWidth: 200 }}
                         value={appName}
                         onChange={(e) =>
                             handleApplicationChange(String(e.target.value))
@@ -287,12 +286,15 @@ export const SafeguardForm = ({
 
                 <FormControl variant='outlined' size='small'>
                     <TextField
-                        sx={{ minWidth: 120 }}
                         type='number'
+                        inputProps={{
+                            step: 0.1,
+                        }}
                         value={threshold}
-                        onChange={(e) =>
-                            handleThresholdChange(Number(e.target.value))
-                        }
+                        onChange={(e) => {
+                            const value = e.target.value;
+                            handleThresholdChange(Number(value));
+                        }}
                         placeholder='Value'
                         variant='outlined'
                         size='small'
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/hooks/useMilestoneProgressionForm.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/hooks/useMilestoneProgressionForm.ts
index 9fb16ee5d5..a275af091e 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/hooks/useMilestoneProgressionForm.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/hooks/useMilestoneProgressionForm.ts
@@ -1,5 +1,5 @@
-import { useState, useCallback } from 'react';
-import { isPast, addMinutes } from 'date-fns';
+import { useCallback, useState } from 'react';
+import { addMinutes, isPast } from 'date-fns';
 import type { MilestoneStatus } from '../ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx';
 import { formatDateYMDHM } from 'utils/formatDate.ts';
 
@@ -112,10 +112,7 @@ export const useMilestoneProgressionForm = (
         event: React.ChangeEvent<HTMLInputElement>,
     ) => {
         const inputValue = event.target.value;
-        if (inputValue === '' || /^\d+$/.test(inputValue)) {
-            const value = inputValue === '' ? 0 : Number.parseInt(inputValue);
-            setTimeValue(value);
-        }
+        setTimeValue(Number(inputValue));
     };
 
     const clearErrors = useCallback(() => {
diff --git a/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx b/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
index c603332797..5ec8e97e9f 100644
--- a/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
+++ b/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/ModeSelector/ModeSelector.tsx
@@ -15,7 +15,7 @@ export const ModeSelector: FC<ModeSelectorProps> = ({
 }) => {
     if (metricType === 'unknown') return null;
     return (
-        <FormControl variant='outlined' size='small' sx={{ minWidth: 200 }}>
+        <FormControl variant='outlined' size='small'>
             <InputLabel id='mode-select-label'>Mode</InputLabel>
             <Select
                 labelId='mode-select-label'
diff --git a/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx b/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
index 86f204f3d9..38a7e2e0df 100644
--- a/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
+++ b/frontend/src/component/impact-metrics/ChartConfigModal/ImpactMetricsControls/RangeSelector/RangeSelector.tsx
@@ -9,7 +9,7 @@ export type RangeSelectorProps = {
 };
 
 export const RangeSelector: FC<RangeSelectorProps> = ({ value, onChange }) => (
-    <FormControl variant='outlined' size='small' sx={{ minWidth: 200 }}>
+    <FormControl variant='outlined' size='small'>
         <InputLabel id='range-select-label'>Time</InputLabel>
         <Select
             labelId='range-select-label'