Fix composer char progress layout (#5620)

* fix composer

* more fixes

1 files changed, 21 insertions, 22 deletions

diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx
index c61f753f2..1c9327410 100644
--- a/src/view/com/composer/char-progress/CharProgress.tsx
+++ b/src/view/com/composer/char-progress/CharProgress.tsx
@@ -7,7 +7,7 @@ import ProgressPie from 'react-native-progress/Pie'
 
 import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {s} from '#/lib/styles'
+import {atoms as a} from '#/alf'
 import {Text} from '../../util/text/Text'
 
 export function CharProgress({
@@ -28,29 +28,28 @@ export function CharProgress({
   const textColor = count > maxLength ? '#e60000' : pal.colors.text
   const circleColor = count > maxLength ? '#e60000' : pal.colors.link
   return (
-    <View style={style}>
-      <Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
+    <View
+      style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm, style]}>
+      <Text style={[{color: textColor}, a.flex_grow, a.text_right, textStyle]}>
         {maxLength - count}
       </Text>
-      <View>
-        {count > maxLength ? (
-          <ProgressPie
-            size={size ?? 30}
-            borderWidth={4}
-            borderColor={circleColor}
-            color={circleColor}
-            progress={Math.min((count - maxLength) / maxLength, 1)}
-          />
-        ) : (
-          <ProgressCircle
-            size={size ?? 30}
-            borderWidth={1}
-            borderColor={pal.colors.border}
-            color={circleColor}
-            progress={count / maxLength}
-          />
-        )}
-      </View>
+      {count > maxLength ? (
+        <ProgressPie
+          size={size ?? 30}
+          borderWidth={4}
+          borderColor={circleColor}
+          color={circleColor}
+          progress={Math.min((count - maxLength) / maxLength, 1)}
+        />
+      ) : (
+        <ProgressCircle
+          size={size ?? 30}
+          borderWidth={1}
+          borderColor={pal.colors.border}
+          color={circleColor}
+          progress={count / maxLength}
+        />
+      )}
     </View>
   )
 }