From de04e816df2cd32223b93b8163e39036c240f16c Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 13 Nov 2025 10:06:24 +0100
Subject: [PATCH] feat: adjust safeguard form elements size (#10973)

---
 .../SafeguardForm/SafeguardForm.tsx           | 93 +++++++++++--------
 .../shared/SharedFormComponents.tsx           | 12 +--
 2 files changed, 53 insertions(+), 52 deletions(-)

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 e3679d56ac..a57c28f573 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/SafeguardForm/SafeguardForm.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@mui/material';
+import { Button, FormControl, TextField } from '@mui/material';
 import ShieldIcon from '@mui/icons-material/Shield';
 import type { FormEvent } from 'react';
 import { useEffect, useMemo, useState } from 'react';
@@ -18,7 +18,6 @@ import {
     StyledLabel,
     StyledMenuItem,
     StyledSelect,
-    StyledTextField,
     StyledTopRow,
 } from '../shared/SharedFormComponents.tsx';
 import type { ISafeguard } from 'interfaces/releasePlans.ts';
@@ -213,6 +212,9 @@ export const SafeguardForm = ({
         <StyledFormContainer onSubmit={handleSubmit}>
             <StyledTopRow>
                 <StyledIcon />
+                <StyledLabel>Pause automation when</StyledLabel>
+            </StyledTopRow>
+            <StyledTopRow>
                 <MetricSelector
                     value={metricName}
                     onChange={handleMetricChange}
@@ -221,20 +223,23 @@ export const SafeguardForm = ({
                 />
 
                 <StyledLabel>filtered by</StyledLabel>
-                <StyledSelect
-                    value={appName}
-                    onChange={(e) =>
-                        handleApplicationChange(String(e.target.value))
-                    }
-                    variant='outlined'
-                    size='small'
-                >
-                    {applicationNames.map((app) => (
-                        <StyledMenuItem key={app} value={app}>
-                            {app === '*' ? 'All' : app}
-                        </StyledMenuItem>
-                    ))}
-                </StyledSelect>
+                <FormControl variant='outlined' size='small'>
+                    <StyledSelect
+                        sx={{ minWidth: 200 }}
+                        value={appName}
+                        onChange={(e) =>
+                            handleApplicationChange(String(e.target.value))
+                        }
+                        variant='outlined'
+                        size='small'
+                    >
+                        {applicationNames.map((app) => (
+                            <StyledMenuItem key={app} value={app}>
+                                {app === '*' ? 'All' : app}
+                            </StyledMenuItem>
+                        ))}
+                    </StyledSelect>
+                </FormControl>
 
                 <StyledLabel>aggregated by</StyledLabel>
                 <ModeSelector
@@ -242,33 +247,39 @@ export const SafeguardForm = ({
                     onChange={handleAggregationModeChange}
                     metricType={metricType}
                 />
-
+            </StyledTopRow>
+            <StyledTopRow>
                 <StyledLabel>is</StyledLabel>
-                <StyledSelect
-                    value={operator}
-                    onChange={(e) =>
-                        handleOperatorChange(
-                            e.target.value as CreateSafeguardSchemaOperator,
-                        )
-                    }
-                    variant='outlined'
-                    size='small'
-                >
-                    <StyledMenuItem value='>'>More than</StyledMenuItem>
-                    <StyledMenuItem value='<'>Less than</StyledMenuItem>
-                </StyledSelect>
+                <FormControl variant='outlined' size='small'>
+                    <StyledSelect
+                        value={operator}
+                        onChange={(e) =>
+                            handleOperatorChange(
+                                e.target.value as CreateSafeguardSchemaOperator,
+                            )
+                        }
+                        variant='outlined'
+                        size='small'
+                    >
+                        <StyledMenuItem value='>'>More than</StyledMenuItem>
+                        <StyledMenuItem value='<'>Less than</StyledMenuItem>
+                    </StyledSelect>
+                </FormControl>
 
-                <StyledTextField
-                    type='number'
-                    value={threshold}
-                    onChange={(e) =>
-                        handleThresholdChange(Number(e.target.value))
-                    }
-                    placeholder='Value'
-                    variant='outlined'
-                    size='small'
-                    required
-                />
+                <FormControl variant='outlined' size='small'>
+                    <TextField
+                        sx={{ minWidth: 120 }}
+                        type='number'
+                        value={threshold}
+                        onChange={(e) =>
+                            handleThresholdChange(Number(e.target.value))
+                        }
+                        placeholder='Value'
+                        variant='outlined'
+                        size='small'
+                        required
+                    />
+                </FormControl>
 
                 <StyledLabel>over</StyledLabel>
                 <RangeSelector
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/shared/SharedFormComponents.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/shared/SharedFormComponents.tsx
index 614127abcc..2a7c8dfc4a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/shared/SharedFormComponents.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/shared/SharedFormComponents.tsx
@@ -1,4 +1,4 @@
-import { styled, Select, MenuItem, TextField } from '@mui/material';
+import { styled, Select, MenuItem } from '@mui/material';
 
 export const StyledFormContainer = styled('form')(({ theme }) => ({
     display: 'flex',
@@ -39,8 +39,6 @@ export const StyledSelect = styled(Select)(({ theme }) => ({
     minWidth: 120,
     maxWidth: 120,
     '& .MuiSelect-select': {
-        fontSize: theme.typography.body2.fontSize,
-        padding: theme.spacing(0.5, 1),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -51,14 +49,6 @@ export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     fontSize: theme.typography.body2.fontSize,
 }));
 
-export const StyledTextField = styled(TextField)(({ theme }) => ({
-    width: 80,
-    '& .MuiInputBase-input': {
-        fontSize: theme.typography.body2.fontSize,
-        padding: theme.spacing(0.5, 1),
-    },
-}));
-
 export const createStyledIcon = (IconComponent: React.ComponentType<any>) =>
     styled(IconComponent)(({ theme }) => ({
         color: theme.palette.common.white,