Remove use of flatten where possible (#9325)

* remove use of flatten where possible

* restore flatten where it says it's needed

* missing utils alpha

src/screens/Messages/components/MessageInput.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import Graphemer from 'graphemer'
@@ -19,7 +19,7 @@ import {
   type EmojiPickerPosition,
 } from '#/view/com/composer/text-input/web/EmojiPicker'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, flatten, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useSharedInputStyles} from '#/components/forms/TextField'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
@@ -199,7 +199,7 @@ export function MessageInput({
         </Button>
         <TextareaAutosize
           ref={textAreaRef}
-          style={StyleSheet.flatten([
+          style={flatten([
             a.flex_1,
             a.px_sm,
             a.border_0,

src/screens/Onboarding/Layout.tsx

@@ -10,7 +10,6 @@ import {useOnboardingDispatch} from '#/state/shell'
 import {Context} from '#/screens/Onboarding/state'
 import {
   atoms as a,
-  flatten,
   native,
   type TextStyleProp,
   tokens,
@@ -228,13 +227,7 @@ export function TitleText({
 }: React.PropsWithChildren<TextStyleProp>) {
   return (
     <Text
-      style={[
-        a.pb_sm,
-        a.text_4xl,
-        a.font_semi_bold,
-        a.leading_tight,
-        flatten(style),
-      ]}>
+      style={[a.pb_sm, a.text_4xl, a.font_semi_bold, a.leading_tight, style]}>
       {children}
     </Text>
   )
@@ -245,7 +238,5 @@ export function DescriptionText({
   style,
 }: React.PropsWithChildren<TextStyleProp>) {
   const t = useTheme()
-  return (
-    <P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P>
-  )
+  return <P style={[t.atoms.text_contrast_medium, style]}>{children}</P>
 }

src/screens/Profile/components/ProfileFeedHeader.tsx

@@ -481,7 +481,7 @@ function DialogInner({
         </Button>
       </View>
 
-      <RichText value={rt} style={[a.text_md, a.leading_snug]} />
+      <RichText value={rt} style={[a.text_md]} />
 
       <View style={[a.flex_row, a.gap_sm, a.align_center]}>
         {typeof likeCount === 'number' && (

src/screens/ProfileList/components/Header.tsx

@@ -200,7 +200,7 @@ export function Header({
       </ProfileSubpageHeader>
       {descriptionRT ? (
         <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}>
-          <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} />
+          <RichText value={descriptionRT} style={[a.text_md]} />
         </View>
       ) : null}
     </>

src/screens/StarterPack/StarterPackScreen.tsx

@@ -458,9 +458,7 @@ function Header({
       </ProfileSubpageHeader>
       {!hasSession || richText || joinedAllTimeCount >= 25 ? (
         <View style={[a.px_lg, a.pt_md, a.pb_sm, a.gap_md]}>
-          {richText ? (
-            <RichText value={richText} style={[a.text_md, a.leading_snug]} />
-          ) : null}
+          {richText ? <RichText value={richText} style={[a.text_md]} /> : null}
           {!hasSession ? (
             <Button
               label={_(msg`Join Bluesky`)}

src/screens/VideoFeed/index.tsx

@@ -955,7 +955,7 @@ function ExpandableRichTextView({
       ]}>
       <RichText
         value={value}
-        style={[a.text_sm, a.flex_1, a.leading_normal]}
+        style={[a.text_sm, a.flex_1, a.leading_relaxed]}
         authorHandle={authorHandle}
         enableTags
         numberOfLines={