[🐴] Reduce header size (#4078)

* make text input container smaller

* make header much smaller

* improve web styling

src/screens/Messages/Conversation/MessageInput.tsx

@@ -82,7 +82,7 @@ export function MessageInput({
   )
 
   return (
-    <View style={a.p_md}>
+    <View style={[a.px_md, a.py_sm]}>
       <View
         style={[
           a.w_full,

src/screens/Messages/Conversation/index.tsx

@@ -7,6 +7,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
+import {makeProfileLink} from '#/lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
@@ -22,9 +23,10 @@ import {useSetMinimalShellMode} from 'state/shell'
 import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
 import {CenteredView} from 'view/com/util/Views'
 import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Error} from '#/components/Error'
+import {Link} from '#/components/Link'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -130,6 +132,8 @@ function Inner() {
   )
 }
 
+const PFP_SIZE = isWeb ? 40 : 34
+
 let Header = ({
   profile: initialProfile,
 }: {
@@ -157,14 +161,13 @@ let Header = ({
         t.atoms.border_contrast_low,
         a.border_b,
         a.flex_row,
-        a.justify_between,
+        a.align_center,
-        a.align_start,
+        a.gap_sm,
-        a.gap_lg,
+        gtTablet ? a.pl_lg : a.pl_xl,
-        a.pl_xl,
         a.pr_lg,
-        a.py_md,
+        a.py_sm,
       ]}>
-      {!gtTablet ? (
+      {!gtTablet && (
         <TouchableOpacity
           testID="conversationHeaderBackBtn"
           onPress={onPressBack}
@@ -182,37 +185,37 @@ let Header = ({
             color={t.atoms.text.color}
           />
         </TouchableOpacity>
-      ) : (
-        <View style={{width: 30}} />
       )}
 
       {profile && moderationOpts ? (
         <HeaderReady profile={profile} moderationOpts={moderationOpts} />
       ) : (
         <>
-          <View style={[a.align_center, a.gap_sm, a.flex_1]}>
+          <View style={[a.flex_row, a.align_center, a.gap_md, a.flex_1]}>
             <View
               style={[
-                {width: 32, height: 32},
+                {width: PFP_SIZE, height: PFP_SIZE},
                 a.rounded_full,
                 t.atoms.bg_contrast_25,
               ]}
             />
-            <View
+            <View style={a.gap_xs}>
-              style={[
+              <View
-                {width: 120, height: 16},
+                style={[
-                a.rounded_xs,
+                  {width: 120, height: 16},
-                t.atoms.bg_contrast_25,
+                  a.rounded_xs,
-                a.mt_xs,
+                  t.atoms.bg_contrast_25,
-              ]}
+                  a.mt_xs,
-            />
+                ]}
-            <View
+              />
-              style={[
+              <View
-                {width: 175, height: 12},
+                style={[
-                a.rounded_xs,
+                  {width: 175, height: 12},
-                t.atoms.bg_contrast_25,
+                  a.rounded_xs,
-              ]}
+                  t.atoms.bg_contrast_25,
-            />
+                ]}
+              />
+            </View>
           </View>
 
           <View style={{width: 30}} />
@@ -248,26 +251,34 @@ function HeaderReady({
 
   return (
     <>
-      <View style={[a.align_center, a.gap_sm, a.flex_1]}>
+      <Link
-        <View style={[a.align_center]}>
+        style={[a.flex_row, a.align_center, a.gap_md, a.flex_1, a.pr_md]}
-          <PreviewableUserAvatar
+        to={makeProfileLink(profile)}>
-            size={32}
+        <PreviewableUserAvatar
-            profile={profile}
+          size={PFP_SIZE}
-            moderation={moderation.ui('avatar')}
+          profile={profile}
-            disableHoverCard={moderation.blocked}
+          moderation={moderation.ui('avatar')}
-          />
+          disableHoverCard={moderation.blocked}
+        />
+        <View style={a.flex_1}>
           <Text
-            style={[a.text_lg, a.font_bold, a.pt_sm, a.pb_2xs]}
+            style={[a.text_md, a.font_bold, web(a.leading_normal)]}
             numberOfLines={1}>
             {displayName}
           </Text>
           {!isDeletedAccount && (
-            <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
+            <Text
+              style={[
+                t.atoms.text_contrast_medium,
+                a.text_sm,
+                web([a.leading_normal, {marginTop: -2}]),
+              ]}
+              numberOfLines={1}>
               @{profile.handle}
             </Text>
           )}
         </View>
-      </View>
+      </Link>
 
       {isConvoActive(convoState) && (
         <ConvoMenu