From 9cb154a2decc145ddd9b0aa68fd7f4d55ce4218e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 31 Jul 2025 10:05:47 -0500
Subject: [PATCH] Make toasts full width on mobile web

---
 src/components/Toast/Toast.tsx     |  1 +
 src/components/Toast/index.web.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 319cf66503..0dc9d4b079 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -40,6 +40,7 @@ export function Toast({
     <Context.Provider value={useMemo(() => ({type}), [type])}>
       <View
         style={[
+          a.flex_1,
           a.py_lg,
           a.pl_xl,
           a.pr_2xl,
diff --git a/src/components/Toast/index.web.tsx b/src/components/Toast/index.web.tsx
index 92a6b79d56..f6ceda568e 100644
--- a/src/components/Toast/index.web.tsx
+++ b/src/components/Toast/index.web.tsx
@@ -7,7 +7,7 @@ import {AccessibilityInfo, Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, web} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const'
 import {Toast} from '#/components/Toast/Toast'
 import {type ToastApi, type ToastType} from '#/components/Toast/types'
@@ -33,6 +33,7 @@ type ToastContainerProps = {}
 
 export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
   const {_} = useLingui()
+  const {gtPhone} = useBreakpoints()
   const [activeToast, setActiveToast] = useState<ActiveToast | undefined>()
   const [isExiting, setIsExiting] = useState(false)
 
@@ -62,13 +63,17 @@ export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
             a.fixed,
             {
               left: a.px_xl.paddingLeft,
+              right: a.px_xl.paddingLeft,
               bottom: a.px_xl.paddingLeft,
-              width: web(`calc(100% - ${a.px_xl.paddingLeft * 2})`),
-              maxWidth: 380,
               ...(isExiting
                 ? TOAST_ANIMATION_STYLES.exiting
                 : TOAST_ANIMATION_STYLES.entering),
             },
+            gtPhone && [
+              {
+                maxWidth: 380,
+              },
+            ],
           ]}>
           <Toast content={activeToast.content} type={activeToast.type} />
           <Pressable