# Files changed · PR \#23910 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/23910/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[fix\(mobile\): undo toasts keep their action on one row](https://git.cafe/pingdotgg/t3code/pull/23910.md)

Version: 4

Head commit: 1484c6eb96febb475d2be500d081d68a8ca64678

Base commit: 51273020db3245f4ec29514a419d29b5dcb012dc

Comparison base: 8d3b061121fe65669d5d43d011b48cd3027a4108

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/mobile/src/components/ui/Toast.tsx

Status: modified; +10; −6

```diff
@@ -1,6 +1,6 @@
 import { MOBILE_SHAPE } from "../../lib/designTokens";
 import { useEffect } from "react";
-import { AccessibilityInfo, Platform, View } from "react-native";
+import { AccessibilityInfo, Platform, View, useWindowDimensions } from "react-native";
 
 import { AppText } from "./AppText";
 import { Button } from "./Button";
@@ -20,6 +20,13 @@
 
 /** The owning screen places and dismisses feedback; actions are never implicit. */
 export function Toast(props: ToastProps) {
+  const { fontScale } = useWindowDimensions();
+  // A one-line message keeps its action on the same row. Descriptions and
+  // accessibility text sizes need the full width, so the action moves below.
+  const inlineAction = !props.description && fontScale < 1.5;
+  const action = props.action ? (
+    <Button label={props.action.label} onPress={props.action.onPress} />
+  ) : null;
   useEffect(() => {
     if (Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(props.message);
   }, [props.message]);
@@ -47,15 +54,12 @@
             </AppText>
           ) : null}
         </View>
+        {inlineAction ? action : null}
         {props.onDismiss ? (
           <IconButton accessibilityLabel="Dismiss message" icon="xmark" onPress={props.onDismiss} />
         ) : null}
       </View>
-      {props.action ? (
-        <View className="mt-2 self-end">
-          <Button label={props.action.label} onPress={props.action.onPress} />
-        </View>
-      ) : null}
+      {action && !inlineAction ? <View className="mt-2 self-end">{action}</View> : null}
     </GlassSurface>
   );
 }
```