Make link schedule rule wrap on smaller screens

actualbudget · Jan 12, 2024 · 5aea86f · 5aea86f
1 parent 795187c
commit 5aea86f
Showing 1 changed file with 3 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/modals/EditRule.jsx b/packages/desktop-client/src/components/modals/EditRule.jsx
@@ -272,7 +272,7 @@ function ScheduleDescription({ id }) {
 
   return (
     <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-      <View style={{ marginRight: 15, flexDirection: 'row' }}>
+      <View style={{ marginRight: 15, flexWrap: 'wrap', flexDirection: 'row' }}>
         <Text
           style={{
             whiteSpace: 'nowrap',
@@ -288,13 +288,9 @@ function ScheduleDescription({ id }) {
           />
         </Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
-        <Text style={{ flexShrink: 0 }}>
-          Amount: {formatAmount(schedule._amount)}
-        </Text>
+        <Text>Amount: {formatAmount(schedule._amount)}</Text>
         <Text style={{ margin: '0 5px' }}> — </Text>
-        <Text style={{ flexShrink: 0 }}>
-          Next: {monthUtils.format(schedule.next_date, dateFormat)}
-        </Text>
+        <Text>Next: {monthUtils.format(schedule.next_date, dateFormat)}</Text>
       </View>
       <StatusBadge status={status} />
     </View>