Fixes to lineheight on web to counteract emoji issues

src/view/com/util/PostMeta.tsx

@@ -35,7 +35,11 @@ export function PostMeta(opts: PostMetaOpts) {
   return (
     <View style={styles.meta}>
       <View style={[styles.metaItem, styles.maxWidth]}>
-        <Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
+        <Text
+          type="lg-bold"
+          style={[pal.text]}
+          numberOfLines={1}
+          lineHeight={1.2}>
           {displayName}
           {handle ? (
             <Text type="md" style={[pal.textLight]}>
@@ -44,7 +48,7 @@ export function PostMeta(opts: PostMetaOpts) {
           ) : undefined}
         </Text>
       </View>
-      <Text type="md" style={[styles.metaItem, pal.textLight]}>
+      <Text type="md" style={[styles.metaItem, pal.textLight]} lineHeight={1.2}>
         &middot; {ago(opts.timestamp)}
       </Text>
     </View>

src/view/com/util/UserInfoText.tsx

@@ -64,7 +64,7 @@ export function UserInfoText({
     )
   } else if (profile) {
     inner = (
-      <Text type={type} style={style}>{`${prefix || ''}${
+      <Text type={type} style={style} lineHeight={1.2}>{`${prefix || ''}${
         profile[attr] || profile.handle
       }`}</Text>
     )

src/view/com/util/Views.web.tsx

@@ -73,14 +73,14 @@ export const ScrollView = React.forwardRef(function (
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    maxWidth: 600,
+    maxWidth: 550,
     marginLeft: 'auto',
     marginRight: 'auto',
   },
   containerScroll: {
     width: '100%',
     height: `calc(100vh - ${DESKTOP_HEADER_HEIGHT}px)`,
-    maxWidth: 600,
+    maxWidth: 550,
     marginLeft: 'auto',
     marginRight: 'auto',
   },

src/view/com/util/text/Text.tsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import {Text as RNText, TextProps} from 'react-native'
-import {s} from 'lib/styles'
+import {s, lh} from 'lib/styles'
 import {useTheme, TypographyVariant} from 'lib/ThemeContext'
 
 export type CustomTextProps = TextProps & {
   type?: TypographyVariant
+  lineHeight?: number
 }
 
 export function Text({
   type = 'md',
   children,
+  lineHeight,
   style,
   ...props
 }: React.PropsWithChildren<CustomTextProps>) {
   const theme = useTheme()
   const typography = theme.typography[type]
+  const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
   return (
-    <RNText style={[s.black, typography, style]} {...props}>
+    <RNText style={[s.black, typography, lineHeightStyle, style]} {...props}>
       {children}
     </RNText>
   )