diff --git a/js/components/src/components/chat/chat-message.tsx b/js/components/src/components/chat/chat-message.tsx
index 42f3763c2..97063f1dc 100644
--- a/js/components/src/components/chat/chat-message.tsx
+++ b/js/components/src/components/chat/chat-message.tsx
@@ -4,7 +4,7 @@ import {
   Mention,
 } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
 import { memo, useCallback } from "react";
-import { Linking, Platform, View } from "react-native";
+import { Linking, Platform, Pressable, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
 import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
@@ -42,32 +42,55 @@ const segmentedObject = (
     if (ftr.$type === "app.bsky.richtext.facet#link") {
       let linkftr = ftr as $Typed<Link>;
       return (
-        <Text
+        <Pressable
+          // @ts-ignore renders as <a> on web
+          href={linkftr.uri}
           key={`mention-${index}`}
-          style={[{ color: atoms.colors.ios.systemBlue, cursor: "pointer" }]}
-          onPress={() => Linking.openURL(linkftr.uri || "")}
+          style={[{ cursor: "pointer" }]}
+          onPress={() =>
+            Platform.OS != "web" && Linking.openURL(linkftr.uri || "")
+          }
         >
-          {obj.text}
-        </Text>
+          <Text
+            style={[
+              {
+                color: atoms.colors.ios.systemBlue,
+                cursor: "pointer",
+                marginBottom: -4,
+              },
+            ]}
+            leading={0}
+          >
+            {obj.text}
+          </Text>
+        </Pressable>
       );
     } else if (ftr.$type === "app.bsky.richtext.facet#mention") {
       let mtnftr = ftr as $Typed<Mention>;
       const profile = userCache?.[mtnftr.did];
       return (
-        <Text
+        <Pressable
+          // @ts-ignore renders as <a> on web
+          href={linkftr.uri}
           key={`mention-${index}`}
-          style={[
-            {
-              cursor: "pointer",
-              color: getRgbColor(profile?.color),
-            },
-          ]}
+          style={[{ cursor: "pointer" }]}
           onPress={() =>
+            Platform.OS != "web" &&
             Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`)
           }
         >
-          {obj.text}
-        </Text>
+          <Text
+            style={[
+              {
+                cursor: "pointer",
+                color: getRgbColor(profile?.color),
+                marginBottom: -4,
+              },
+            ]}
+          >
+            {obj.text}
+          </Text>
+        </Pressable>
       );
     } else {
       // render as normal text if we don't recognize the facet type
@@ -159,7 +182,6 @@ export const RenderChatMessage = memo(
               style={{
                 fontVariant: ["tabular-nums"],
                 color: colors.gray[400],
-                width: 44,
                 marginRight: 8,
               }}
             >