Fixes to lineheight on web to counteract emoji issues

8 files changed, 31 insertions, 14 deletions

diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 94bedc46f..68f12b721 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -188,7 +188,7 @@ export const FeedItem = observer(function FeedItem({
                   style={styles.metaItem}
                   href={authors[0].href}
                   title={`@${authors[0].handle}`}>
-                  <Text style={[pal.text, s.bold]}>
+                  <Text style={[pal.text, s.bold]} lineHeight={1.2}>
                     {authors[0].displayName || authors[0].handle}
                   </Text>
                 </Link>
@@ -333,10 +333,16 @@ function ExpandedAuthorsList({
             />
           </View>
           <View style={s.flex1}>
-            <Text type="lg-bold" numberOfLines={1} style={pal.text}>
+            <Text
+              type="lg-bold"
+              numberOfLines={1}
+              style={pal.text}
+              lineHeight={1.2}>
               {author.displayName || author.handle}
               &nbsp;
-              <Text style={[pal.textLight]}>{author.handle}</Text>
+              <Text style={[pal.textLight]} lineHeight={1.2}>
+                {author.handle}
+              </Text>
             </Text>
           </View>
         </Link>
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index cd3a49d64..98d44267d 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -146,7 +146,11 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.metaItem}
                     href={authorHref}
                     title={authorTitle}>
-                    <Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
+                    <Text
+                      type="xl-bold"
+                      style={[pal.text]}
+                      numberOfLines={1}
+                      lineHeight={1.2}>
                       {item.post.author.displayName || item.post.author.handle}
                     </Text>
                   </Link>
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 8e793ecc0..1550f8620 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -164,7 +164,7 @@ export const Post = observer(function Post({
                 size={9}
                 style={[pal.textLight, s.mr5]}
               />
-              <Text type="sm" style={[pal.textLight, s.mr2]}>
+              <Text type="sm" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
                 Reply to
               </Text>
               <UserInfoText
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index e7421a26d..8c46cb1a8 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -155,7 +155,7 @@ export const FeedItem = observer(function ({
                 {color: pal.colors.textLight} as FontAwesomeIconStyle,
               ]}
             />
-            <Text type="sm-bold" style={pal.textLight}>
+            <Text type="sm-bold" style={pal.textLight} lineHeight={1.2}>
               Reposted by{' '}
               {item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
             </Text>
@@ -188,7 +188,7 @@ export const FeedItem = observer(function ({
                     s.mr5,
                   ]}
                 />
-                <Text type="md" style={[pal.textLight, s.mr2]}>
+                <Text type="md" style={[pal.textLight, s.mr2]} lineHeight={1.2}>
                   Reply to
                 </Text>
                 <UserInfoText
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 16b9535ff..6ba6fac1b 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/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>
diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx
index d7907aa89..2655232fc 100644
--- a/src/view/com/util/UserInfoText.tsx
+++ b/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>
     )
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 1ffd7844c..8b5adaa04 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/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',
   },
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index 14c57cf47..2825390cb 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/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>
   )