From 6bf1572ffcb2113f3e79a0a85bce7664fcdbb34a Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Wed, 17 Jun 2026 02:29:05 -0700
Subject: [PATCH] Increase chat bubble max width to 85% (was 80%) (#10930)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/components/dms/ActionsWrapper.web.tsx | 11 +++++++++--
 src/components/dms/MessageItem.tsx        |  3 ++-
 src/components/dms/SwipeToReply.tsx       |  3 ++-
 src/components/dms/util.ts                |  6 ++++++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/dms/ActionsWrapper.web.tsx b/src/components/dms/ActionsWrapper.web.tsx
index 75f816c07d..8d67051535 100644
--- a/src/components/dms/ActionsWrapper.web.tsx
+++ b/src/components/dms/ActionsWrapper.web.tsx
@@ -15,7 +15,11 @@ import {EmojiSmile_Stroke2_Corner0_Rounded as EmojiSmileIcon} from '#/components
 import * as Toast from '#/components/Toast'
 import type * as bsky from '#/types/bsky'
 import {EmojiReactionPicker} from './EmojiReactionPicker'
-import {canReact, hasReachedReactionLimit} from './util'
+import {
+  canReact,
+  hasReachedReactionLimit,
+  MESSAGE_BUBBLE_MAX_WIDTH,
+} from './util'
 
 export function ActionsWrapper({
   message,
@@ -163,7 +167,10 @@ export function ActionsWrapper({
         </MessageContextMenu>
       </View>
       <View
-        style={[{maxWidth: '80%'}, isFromSelf ? a.align_end : a.align_start]}>
+        style={[
+          {maxWidth: MESSAGE_BUBBLE_MAX_WIDTH},
+          isFromSelf ? a.align_end : a.align_start,
+        ]}>
         {children}
       </View>
     </View>
diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index 6d5f9ef425..2e3cffe997 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -62,6 +62,7 @@ import {groupReactions} from './ReactionsDialog'
 import {
   CLUSTERED_MESSAGE_THRESHOLD_MS,
   filterBlockedReactions,
+  MESSAGE_BUBBLE_MAX_WIDTH,
   MESSAGE_GAP_THRESHOLD_MS,
 } from './util'
 
@@ -661,7 +662,7 @@ function BlockedPlaceholder({
   return (
     <>
       <Button
-        style={[{maxWidth: '80%'}, a.self_start]}
+        style={[{maxWidth: MESSAGE_BUBBLE_MAX_WIDTH}, a.self_start]}
         label={
           profile.viewer?.blocking
             ? l`This message is hidden because you are blocking this user.`
diff --git a/src/components/dms/SwipeToReply.tsx b/src/components/dms/SwipeToReply.tsx
index 01e9148662..3ae0347374 100644
--- a/src/components/dms/SwipeToReply.tsx
+++ b/src/components/dms/SwipeToReply.tsx
@@ -15,6 +15,7 @@ import Animated, {
 import {useHaptics} from '#/lib/haptics'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {ArrowCornerDownRight_Stroke2_Corner3_Rounded as ReplyIcon} from '#/components/icons/ArrowCornerDownRight'
+import {MESSAGE_BUBBLE_MAX_WIDTH} from './util'
 
 // Distance the bubble must travel before releasing fires a reply.
 const ACTIVATION_THRESHOLD = 56
@@ -184,7 +185,7 @@ export function SwipeToReply({
           leaving the gutter free for the back/scroll gestures. */}
       <Animated.View
         style={[
-          {maxWidth: '80%'},
+          {maxWidth: MESSAGE_BUBBLE_MAX_WIDTH},
           isFromSelf ? a.self_end : a.self_start,
           contentStyle,
         ]}>
diff --git a/src/components/dms/util.ts b/src/components/dms/util.ts
index d37c93430c..ce0d30a8fd 100644
--- a/src/components/dms/util.ts
+++ b/src/components/dms/util.ts
@@ -11,12 +11,18 @@ import {isBlockedOrBlocking} from '#/lib/moderation/blocked-and-muted'
 import {logger} from '#/logger'
 import {type Shadow} from '#/state/cache/profile-shadow'
 import {type ConvoState, ConvoStatus} from '#/state/messages/convo/types'
+import {platform} from '#/alf'
 import {type ReportSubject} from '#/components/moderation/ReportDialog/types'
 import * as bsky from '#/types/bsky'
 
 export const MESSAGE_GAP_THRESHOLD_MS = 60 * 60 * 1000
 export const CLUSTERED_MESSAGE_THRESHOLD_MS = 5 * 60 * 1000
 
+export const MESSAGE_BUBBLE_MAX_WIDTH = platform({
+  web: '80%' as const,
+  default: '85%' as const,
+})
+
 export function canBeMessaged(profile: bsky.profile.AnyProfileView) {
   switch (profile.associated?.chat?.allowIncoming) {
     case 'none':