Tweak LogBox notifications for iPhone Duo, fix rail touches (#58958)

Summary:
Minimal fixes to the LogBox notification toasts for the iPhone Duo, where they stretch across the unfolded display and block the tab bar beside them when folded.

- Cap the toasts at 600pt wide and center them, so they no longer span the unfolded display edge to edge.
- **Fix**: Pass touches outside the toasts through to the app, so the folded Duo's rail tab bar beside them stays tappable.
- **Fix**: Raise the dismiss ×'s contrast from about 2.5:1 to about 7:1. Previously, it drew in the toast's own color on a mid-gray circle and read as **faint/invisible**; the icon is unchanged.
- **Tweak**: Round corners from 8 to 12px.

| Before | After |
|---|---|
| <img src="https://github.com/user-attachments/assets/612d33c1-8d93-4a47-8bd5-5d3c118fb5c4" width="400" /> | <img src="https://github.com/user-attachments/assets/ae436c7d-06b6-4f7f-a07c-5ee7cbe51aef" width="400" /> |

Changelog:
[General][Fixed] - **LogBox**: Fix bottom notification appearance/touch targets on iPhone Duo

Pull Request resolved: #58958

Test Plan:
```
yarn test packages/react-native/Libraries/LogBox
```

**iPhone Duo, folded**

| Before | Before, tab bar blocked | After |
|---|---|---|
| <img src=--sanitized--

Reviewed By: vzaidman

Differential Revision: D124115690

Pulled By: Abbondanzo

fbshipit-source-id: 0844b21f898d309eff50235147dc5f0bb8b9ca3e

Author: huntie

packages/react-native/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -111,15 +111,21 @@ export function LogBoxNotificationContainer(props: Props): React.Node {
 
 const styles = StyleSheet.create({
   list: {
+    alignItems: 'center',
     bottom: 20,
     left: 10,
     right: 10,
+    // The container spans the width of the screen, so it passes touches outside the toasts through to the app, such
+    // as to a tab bar beside them.
+    pointerEvents: 'box-none',
     position: 'absolute',
   },
   toast: {
-    borderRadius: 8,
+    borderRadius: 12,
     marginBottom: 5,
+    maxWidth: 600,
     overflow: 'hidden',
+    width: '100%',
   },
 });
 

packages/react-native/Libraries/LogBox/UI/LogBoxNotificationDismissButton.js

@@ -24,8 +24,8 @@ export default function LogBoxNotificationDismissButton(props: {
       <LogBoxButton
         id={props.id}
         backgroundColor={{
-          default: LogBoxStyle.getTextColor(0.3),
-          pressed: LogBoxStyle.getTextColor(0.5),
+          default: LogBoxStyle.getTextColor(0.15),
+          pressed: LogBoxStyle.getTextColor(0.3),
         }}
         hitSlop={{
           top: 12,
@@ -64,6 +64,6 @@ const styles = StyleSheet.create({
   image: {
     height: 8,
     width: 8,
-    tintColor: LogBoxStyle.getBackgroundColor(1),
+    tintColor: LogBoxStyle.getTextColor(0.8),
   },
 });

packages/react-native/Libraries/LogBox/__tests__/__snapshots__/LogBoxNotificationContainer-test.js.snap

@@ -4,8 +4,10 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
 <SafeAreaView
   style={
     Object {
+      "alignItems": "center",
       "bottom": 20,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -14,9 +16,11 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
   <View
     style={
       Object {
-        "borderRadius": 8,
+        "borderRadius": 12,
         "marginBottom": 5,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -59,9 +63,11 @@ exports[`LogBoxNotificationContainer should render both an error and warning not
   <View
     style={
       Object {
-        "borderRadius": 8,
+        "borderRadius": 12,
         "marginBottom": 5,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -116,8 +122,10 @@ exports[`LogBoxNotificationContainer should render the latest error notification
 <SafeAreaView
   style={
     Object {
+      "alignItems": "center",
       "bottom": 20,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -126,9 +134,11 @@ exports[`LogBoxNotificationContainer should render the latest error notification
   <View
     style={
       Object {
-        "borderRadius": 8,
+        "borderRadius": 12,
         "marginBottom": 5,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >
@@ -175,8 +185,10 @@ exports[`LogBoxNotificationContainer should render the latest warning notificati
 <SafeAreaView
   style={
     Object {
+      "alignItems": "center",
       "bottom": 20,
       "left": 10,
+      "pointerEvents": "box-none",
       "position": "absolute",
       "right": 10,
     }
@@ -185,9 +197,11 @@ exports[`LogBoxNotificationContainer should render the latest warning notificati
   <View
     style={
       Object {
-        "borderRadius": 8,
+        "borderRadius": 12,
         "marginBottom": 5,
+        "maxWidth": 600,
         "overflow": "hidden",
+        "width": "100%",
       }
     }
   >