exploration of tag styles

src/view/com/Tag.tsx

@@ -6,15 +6,61 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 
 import {usePalette} from 'lib/hooks/usePalette'
-import {Text} from 'view/com/util/text/Text'
+import {Text, CustomTextProps} from 'view/com/util/text/Text'
+import {Link} from 'view/com/util/Link'
 
-export function Tag({value}: {value: string}) {
+export function Tag({
+  value,
+  textSize,
+}: {
+  value: string
+  textSize?: CustomTextProps['type']
+}) {
   const pal = usePalette('default')
+  const type = textSize || 'xs-medium'
 
   return (
-    <Text type="xs-medium" style={[styles.tag, pal.viewLight, pal.textLight]}>
+    <Link
+      asAnchor
+      accessible
+      anchorNoUnderline
+      href={`/search?q=${value}`}
+      style={[pal.border, styles.tag]}>
+      <Text type={type} style={[pal.textLight]}>
         #{value}
       </Text>
+    </Link>
+  )
+}
+
+export function InlineTag({
+  value,
+  textSize,
+}: {
+  value: string
+  textSize?: CustomTextProps['type']
+}) {
+  const pal = usePalette('default')
+  const type = textSize || 'xs-medium'
+
+  return (
+    <Link
+      asAnchor
+      accessible
+      anchorNoUnderline
+      href={`/search?q=${value}`}
+      style={[
+        pal.border,
+        styles.tag,
+        {
+          paddingTop: 0,
+          paddingBottom: 2,
+        },
+      ]}>
+      <Text type={type} style={[pal.textLight]}>
+        #{value}
+      </Text>
+    </Link>
   )
 }
 
@@ -74,8 +120,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     gap: 4,
-    paddingVertical: 3,
+    paddingTop: 1,
-    paddingHorizontal: 8,
+    paddingBottom: 2,
+    paddingHorizontal: 6,
     borderRadius: 20,
     overflow: 'hidden',
     borderWidth: 1,

src/view/com/post-thread/PostThreadItem.tsx

@@ -36,6 +36,7 @@ import {TimeElapsed} from 'view/com/util/TimeElapsed'
 import {makeProfileLink} from 'lib/routes/links'
 import {isDesktopWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {Tag} from 'view/com/Tag'
 
 export const PostThreadItem = observer(function PostThreadItem({
   item,
@@ -339,18 +340,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   paddingBottom: 12,
                 }}>
                 {item.post.record.tags.map(tag => (
-                  <Link
+                  <Tag key={tag} value={tag} textSize="post-text-lg" />
-                    key={tag}
-                    asAnchor
-                    accessible
-                    anchorNoUnderline
-                    href={`/search?q=${tag}`}>
-                    <Text
-                      type="xs-medium"
-                      style={[styles.tag, pal.viewLight, pal.textLight]}>
-                      #{tag}
-                    </Text>
-                  </Link>
                 ))}
               </View>
             ) : null}

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

@@ -7,6 +7,7 @@ import {lh} from 'lib/styles'
 import {toShortUrl} from 'lib/strings/url-helpers'
 import {useTheme, TypographyVariant} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
+import {InlineTag} from 'view/com/Tag'
 
 const WORD_WRAP = {wordWrap: 1}
 
@@ -93,16 +94,7 @@ export function RichText({
         />,
       )
     } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) {
-      els.push(
+      els.push(<InlineTag key={key} value={tag.tag} textSize={type} />)
-        <TextLink
-          key={key}
-          type={type}
-          text={segment.text}
-          href={`/search?q=${tag.tag}`}
-          style={[style, lineHeightStyle, pal.link]}
-          dataSet={WORD_WRAP}
-        />,
-      )
     } else {
       els.push(segment.text)
     }

web/index.html

@@ -116,6 +116,7 @@
       }
       .ProseMirror p {
         margin: 0;
+        line-height: 1.5;
       }
       .ProseMirror p.is-editor-empty:first-child::before {
         color: #8d8e96;
@@ -155,8 +156,8 @@
       .ProseMirror .mention::after {
         content: '';
         position: absolute;
-        top: -1px;
+        top: 0;
-        bottom: -3px;
+        bottom: -2px;
         left: -8px;
         right: -8px;
         z-index: -1;