From 1eb68d63182ac9460f155df53c7b85d4bfe2d125 Mon Sep 17 00:00:00 2001
From: andrefernandes-95 <rutxo1995@gmail.com>
Date: Wed, 5 Feb 2025 09:25:41 +0000
Subject: [PATCH 1/2] Added Portal to ErrorMessage to stack it on top of the
 view

---
 src/view/com/util/error/ErrorMessage.tsx | 70 +++++++++++++-----------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx
index c09d1b2e65..f216c3d439 100644
--- a/src/view/com/util/error/ErrorMessage.tsx
+++ b/src/view/com/util/error/ErrorMessage.tsx
@@ -14,6 +14,7 @@ import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
+import {Portal} from '#/components/Portal'
 import {Text} from '../text/Text'
 
 export function ErrorMessage({
@@ -31,44 +32,51 @@ export function ErrorMessage({
   const pal = usePalette('error')
   const {_} = useLingui()
   return (
-    <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
-      <View
-        style={[styles.errorIcon, {backgroundColor: theme.palette.error.icon}]}>
-        <FontAwesomeIcon
-          icon="exclamation"
-          style={pal.text as FontAwesomeIconStyle}
-          size={16}
-        />
-      </View>
-      <Text
-        type="sm-medium"
-        style={[styles.message, pal.text]}
-        numberOfLines={numberOfLines}>
-        {message}
-      </Text>
-      {onPressTryAgain && (
-        <TouchableOpacity
-          testID="errorMessageTryAgainButton"
-          style={styles.btn}
-          onPress={onPressTryAgain}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Retry`)}
-          accessibilityHint={_(
-            msg`Retries the last action, which errored out`,
-          )}>
+    <Portal>
+      <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
+        <View
+          style={[
+            styles.errorIcon,
+            {backgroundColor: theme.palette.error.icon},
+          ]}>
           <FontAwesomeIcon
-            icon="arrows-rotate"
-            style={{color: theme.palette.error.icon}}
-            size={18}
+            icon="exclamation"
+            style={pal.text as FontAwesomeIconStyle}
+            size={16}
           />
-        </TouchableOpacity>
-      )}
-    </View>
+        </View>
+        <Text
+          type="sm-medium"
+          style={[styles.message, pal.text]}
+          numberOfLines={numberOfLines}>
+          {message}
+        </Text>
+        {onPressTryAgain && (
+          <TouchableOpacity
+            testID="errorMessageTryAgainButton"
+            style={styles.btn}
+            onPress={onPressTryAgain}
+            accessibilityRole="button"
+            accessibilityLabel={_(msg`Retry`)}
+            accessibilityHint={_(
+              msg`Retries the last action, which errored out`,
+            )}>
+            <FontAwesomeIcon
+              icon="arrows-rotate"
+              style={{color: theme.palette.error.icon}}
+              size={18}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+    </Portal>
   )
 }
 
 const styles = StyleSheet.create({
   outer: {
+    position: 'fixed',
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 8,

From df129340f70909d5a04cfeb68962d41f1b2481cc Mon Sep 17 00:00:00 2001
From: andrefernandes-95 <rutxo1995@gmail.com>
Date: Wed, 5 Feb 2025 17:36:08 +0000
Subject: [PATCH 2/2] Changing Portal solution for Layout.Center according to
 PR suggestion

---
 src/view/com/util/error/ErrorMessage.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx
index f216c3d439..50e55e70c8 100644
--- a/src/view/com/util/error/ErrorMessage.tsx
+++ b/src/view/com/util/error/ErrorMessage.tsx
@@ -14,7 +14,7 @@ import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useTheme} from '#/lib/ThemeContext'
-import {Portal} from '#/components/Portal'
+import * as Layout from '#/components/Layout'
 import {Text} from '../text/Text'
 
 export function ErrorMessage({
@@ -32,7 +32,7 @@ export function ErrorMessage({
   const pal = usePalette('error')
   const {_} = useLingui()
   return (
-    <Portal>
+    <Layout.Center>
       <View testID="errorMessageView" style={[styles.outer, pal.view, style]}>
         <View
           style={[
@@ -69,14 +69,12 @@ export function ErrorMessage({
           </TouchableOpacity>
         )}
       </View>
-    </Portal>
+    </Layout.Center>
   )
 }
 
 const styles = StyleSheet.create({
   outer: {
-    position: 'fixed',
-    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 8,