Fix composer char progress layout (#5620)

* fix composer

* more fixes

2 files changed, 71 insertions, 70 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index e03c64a42..94c02767e 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -867,48 +867,59 @@ export const ComposePost = ({
           )}
           <View
             style={[
+              a.flex_row,
+              a.py_xs,
+              {paddingLeft: 7, paddingRight: 16},
+              a.align_center,
+              a.border_t,
               t.atoms.bg,
               t.atoms.border_contrast_medium,
-              styles.bottomBar,
+              a.justify_between,
             ]}>
-            {videoState.status !== 'idle' && videoState.status !== 'done' ? (
-              <VideoUploadToolbar state={videoState} />
-            ) : (
-              <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
-                <SelectPhotoBtn
-                  size={images.length}
-                  disabled={!canSelectImages}
-                  onAdd={onImageAdd}
-                />
-                <SelectVideoBtn
-                  onSelectVideo={selectVideo}
-                  disabled={!canSelectImages || images?.length > 0}
-                  setError={setError}
-                />
-                <OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} />
-                <SelectGifBtn
-                  onClose={focusTextInput}
-                  onSelectGif={onSelectGif}
-                  disabled={hasMedia}
-                  Portal={Portal.Portal}
-                />
-                {!isMobile ? (
-                  <Button
-                    onPress={onEmojiButtonPress}
-                    style={a.p_sm}
-                    label={_(msg`Open emoji picker`)}
-                    accessibilityHint={_(msg`Open emoji picker`)}
-                    variant="ghost"
-                    shape="round"
-                    color="primary">
-                    <EmojiSmile size="lg" />
-                  </Button>
-                ) : null}
-              </ToolbarWrapper>
-            )}
-            <View style={a.flex_1} />
-            <SelectLangBtn />
-            <CharProgress count={graphemeLength} />
+            <View style={[a.flex_row, a.align_center]}>
+              {videoState.status !== 'idle' && videoState.status !== 'done' ? (
+                <VideoUploadToolbar state={videoState} />
+              ) : (
+                <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
+                  <SelectPhotoBtn
+                    size={images.length}
+                    disabled={!canSelectImages}
+                    onAdd={onImageAdd}
+                  />
+                  <SelectVideoBtn
+                    onSelectVideo={selectVideo}
+                    disabled={!canSelectImages || images?.length > 0}
+                    setError={setError}
+                  />
+                  <OpenCameraBtn
+                    disabled={!canSelectImages}
+                    onAdd={onImageAdd}
+                  />
+                  <SelectGifBtn
+                    onClose={focusTextInput}
+                    onSelectGif={onSelectGif}
+                    disabled={hasMedia}
+                    Portal={Portal.Portal}
+                  />
+                  {!isMobile ? (
+                    <Button
+                      onPress={onEmojiButtonPress}
+                      style={a.p_sm}
+                      label={_(msg`Open emoji picker`)}
+                      accessibilityHint={_(msg`Open emoji picker`)}
+                      variant="ghost"
+                      shape="round"
+                      color="primary">
+                      <EmojiSmile size="lg" />
+                    </Button>
+                  ) : null}
+                </ToolbarWrapper>
+              )}
+            </View>
+            <View style={[a.flex_row, a.align_center, a.justify_between]}>
+              <SelectLangBtn />
+              <CharProgress count={graphemeLength} style={{width: 65}} />
+            </View>
           </View>
         </View>
         <Prompt.Basic
@@ -1128,15 +1139,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
     marginBottom: 4,
   },
-  bottomBar: {
-    flexDirection: 'row',
-    paddingVertical: 4,
-    // should be 8 but due to visual alignment we have to fudge it
-    paddingLeft: 7,
-    paddingRight: 16,
-    alignItems: 'center',
-    borderTopWidth: StyleSheet.hairlineWidth,
-  },
 })
 
 function ErrorBanner({
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>
   )
 }