From fa72f7684b7678d51e7fb95279f3998aa468fac6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 5 Aug 2026 20:27:20 +0300
Subject: [PATCH] scope web-only dialog width caps to web

now that android tablet sheets lay content out at the real 640dp canvas,
unscoped maxWidth caps on dialog content (previously inert on phones)
became visible as narrow left-aligned content. wrap them in web() to
match the established pattern (BlockDialog, ModerationDetailsDialog).
also covers gtMobile-gated caps, which were live on android tablets
because useBreakpoints has no native split.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/dialogs/Embed.tsx                             | 4 ++--
 src/components/dialogs/Signin.tsx                            | 4 ++--
 .../dialogs/nuxs/InitialVerificationAnnouncement.tsx         | 5 +++--
 src/components/intents/VerifyEmailIntentDialog.tsx           | 5 +++--
 src/components/moderation/ReportDialog/index.tsx             | 4 ++--
 src/components/verification/VerificationsDialog.tsx          | 5 +++--
 src/components/verification/VerifierDialog.tsx               | 5 +++--
 src/view/com/composer/labels/LabelsBtn.tsx                   | 2 +-
 8 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index caecc9a2a9..6c0f2e052e 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -8,7 +8,7 @@ import {Trans} from '@lingui/react/macro'
 import {EMBED_SCRIPT} from '#/lib/constants'
 import {niceDate} from '#/lib/strings/time'
 import {toShareUrl} from '#/lib/strings/url-helpers'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as SegmentedControl from '#/components/forms/SegmentedControl'
@@ -103,7 +103,7 @@ function EmbedDialogInner({
   }, [i18n, postUri, postCid, record, timestamp, postAuthor, colorMode])
 
   return (
-    <Dialog.Inner label={_(msg`Embed post`)} style={[{maxWidth: 500}]}>
+    <Dialog.Inner label={_(msg`Embed post`)} style={[web({maxWidth: 500})]}>
       <View style={[a.gap_lg]}>
         <View style={[a.gap_sm]}>
           <Text style={[a.text_2xl, a.font_bold]}>
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
index d98299a985..a8939eb07d 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -8,7 +8,7 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
@@ -45,7 +45,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
   return (
     <Dialog.ScrollableInner
       label={_(msg`Sign in to Bluesky or create a new account`)}
-      style={[gtMobile ? {width: 'auto', maxWidth: 420} : a.w_full]}>
+      style={[a.w_full, gtMobile && web({width: 'auto', maxWidth: 420})]}>
       <View style={[!IS_NATIVE && a.p_2xl]}>
         <View
           style={[
diff --git a/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx b/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
index cbe2555aac..2ed45b75ba 100644
--- a/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
+++ b/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 
 import {urls} from '#/lib/constants'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useNuxDialogContext} from '#/components/dialogs/nuxs'
@@ -38,7 +38,8 @@ export function InitialVerificationAnnouncement() {
       <Dialog.ScrollableInner
         label={_(msg`Announcing verification on Bluesky`)}
         style={[
-          gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+          a.w_full,
+          gtMobile && web({width: 'auto', maxWidth: 400, minWidth: 200}),
         ]}>
         <View style={[a.align_start, a.gap_xl]}>
           <View
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 272804af0e..753a167396 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 
 import {usePdsClient, useSession} from '#/state/session'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
@@ -62,7 +62,8 @@ function Inner({}: {control: DialogControlProps}) {
     <Dialog.ScrollableInner
       label={_(msg`Verify email dialog`)}
       style={[
-        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+        a.w_full,
+        gtMobile && web({width: 'auto', maxWidth: 400, minWidth: 200}),
       ]}>
       <View style={[a.gap_xl]}>
         {status === 'loading' ? (
diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
index c5c60ccba4..0004144a07 100644
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -18,7 +18,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
 import {useMyLabelersQuery} from '#/state/queries/preferences'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useGutters, useTheme} from '#/alf'
+import {atoms as a, useGutters, useTheme, web} from '#/alf'
 import * as Admonition from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -335,7 +335,7 @@ function Inner(
       testID="report:dialog"
       label={l`Report dialog`}
       ref={ref}
-      style={[a.w_full, {maxWidth: 500}]}>
+      style={[a.w_full, web({maxWidth: 500})]}>
       <View style={[a.gap_2xl, IS_NATIVE && a.pt_md]}>
         <StepOuter>
           <StepTitle
diff --git a/src/components/verification/VerificationsDialog.tsx b/src/components/verification/VerificationsDialog.tsx
index 5f3562ee6e..808153d9d8 100644
--- a/src/components/verification/VerificationsDialog.tsx
+++ b/src/components/verification/VerificationsDialog.tsx
@@ -8,7 +8,7 @@ import {getUserDisplayName} from '#/lib/getUserDisplayName'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,8 @@ function Inner({
     <Dialog.ScrollableInner
       label={label}
       style={[
-        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+        a.w_full,
+        gtMobile && web({width: 'auto', maxWidth: 400, minWidth: 200}),
       ]}>
       <View style={[a.gap_sm, a.pb_lg]}>
         <Text style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
diff --git a/src/components/verification/VerifierDialog.tsx b/src/components/verification/VerifierDialog.tsx
index e8944024ca..70648045ea 100644
--- a/src/components/verification/VerifierDialog.tsx
+++ b/src/components/verification/VerifierDialog.tsx
@@ -7,7 +7,7 @@ import {Trans} from '@lingui/react/macro'
 import {urls} from '#/lib/constants'
 import {getUserDisplayName} from '#/lib/getUserDisplayName'
 import {useSession} from '#/state/session'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {VerifierCheck} from '#/components/icons/VerifierCheck'
@@ -65,7 +65,8 @@ function Inner({
     <Dialog.ScrollableInner
       label={label}
       style={[
-        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+        a.w_full,
+        gtMobile && web({width: 'auto', maxWidth: 400, minWidth: 200}),
       ]}>
       <View style={[a.gap_lg]}>
         <View
diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx
index 9471dc0d2e..a8e7076a48 100644
--- a/src/view/com/composer/labels/LabelsBtn.tsx
+++ b/src/view/com/composer/labels/LabelsBtn.tsx
@@ -101,7 +101,7 @@ function DialogInner({
   return (
     <Dialog.ScrollableInner
       label={_(msg`Add a content warning`)}
-      style={[{maxWidth: 500}, a.w_full]}>
+      style={[a.w_full, web({maxWidth: 500})]}>
       <View style={[a.flex_1]}>
         <View style={[a.gap_sm]}>
           <Text style={[a.text_2xl, a.font_semi_bold]}>