Enhance responsiveness of GenericInput in RuleEditor component for mobile devices (#5601)

MatissJanis · web-flow · commit 102c6eaff6c6 · 2025-08-21T22:17:17.000+01:00
* Enhance responsiveness of GenericInput in RuleEditor component for mobile devices

* Refactor ActionEditor layout in RuleEditor component for improved responsiveness

- Adjusted styles for the View components to enhance layout flexibility.
- Ensured the GenericInput component maintains appropriate minimum width based on method type.
- Updated Stack component to prevent shrinking, improving overall UI consistency.
diff --git a/packages/desktop-client/src/components/rules/RuleEditor.tsx b/packages/desktop-client/src/components/rules/RuleEditor.tsx
@@ -557,7 +557,13 @@ function ActionEditor({
         </>
       ) : op === 'set-split-amount' ? (
         <>
-          <View style={{ padding: '5px 10px', lineHeight: '1em' }}>
+          <View
+            style={{
+              padding: '5px 10px',
+              lineHeight: '1em',
+              flexShrink: 0,
+            }}
+          >
             {t('allocate')}
           </View>
 
@@ -567,7 +573,12 @@ function ActionEditor({
             onChange={onChange}
           />
 
-          <View style={{ flex: 1 }}>
+          <View
+            style={{
+              flex: 1,
+              minWidth: options.method === 'fixed-percent' ? 45 : 70,
+            }}
+          >
             {options.method !== 'remainder' && (
               // @ts-expect-error fix this
               <GenericInput
@@ -618,7 +629,7 @@ function ActionEditor({
         </>
       ) : null}
 
-      <Stack direction="row">
+      <Stack direction="row" style={{ flexShrink: 0 }}>
         <EditorButtons
           onAdd={onAdd}
           onDelete={
diff --git a/upcoming-release-notes/5601.md b/upcoming-release-notes/5601.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Improve responsiveness of set-split-amount field on mobile
