From a53c6740a5a5aff70e8f447a5f72a68871bb57e1 Mon Sep 17 00:00:00 2001
From: Samuel Holmes <sam@edge.app>
Date: Mon, 29 Jan 2024 13:38:20 -0800
Subject: [PATCH] fixup! Fix Tx List Margins

---
 src/components/scenes/TransactionListScene.tsx | 6 +++++-
 src/components/themed/TransactionListTop.tsx   | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/scenes/TransactionListScene.tsx b/src/components/scenes/TransactionListScene.tsx
index f591e98992b..af7127fdaa0 100644
--- a/src/components/scenes/TransactionListScene.tsx
+++ b/src/components/scenes/TransactionListScene.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 import { ListRenderItemInfo, RefreshControl, View } from 'react-native'
 import { getVersion } from 'react-native-device-info'
 import Animated from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
 import { useHandler } from '../../hooks/useHandler'
@@ -275,6 +276,9 @@ function TransactionListComponent(props: Props) {
     backgroundColors[0] = scaledColor
   }
 
+  // TODO: Include this fix in the SceneWrapper component
+  const safeAreaInsets = useSafeAreaInsets()
+
   return (
     <SceneWrapper
       accentColors={accentColors}
@@ -294,7 +298,7 @@ function TransactionListComponent(props: Props) {
             ref={flashListRef}
             contentContainerStyle={{
               paddingTop: insetStyle.paddingTop + theme.rem(0.5),
-              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5),
+              paddingBottom: insetStyle.paddingBottom + theme.rem(0.5) + safeAreaInsets.bottom,
               paddingLeft: insetStyle.paddingLeft + theme.rem(0.5),
               paddingRight: insetStyle.paddingRight + theme.rem(0.5)
             }}
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index b3f620c0f17..d47bfef1bdf 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -504,6 +504,8 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
 
   // TODO: Fix SceneHeader to be UI4 compatible
+  // This negative margin will cause the SceneHeader's divider-line to touch
+  // the right edge of the screen. This is design roll-off from UI3.
   tempSceneHeader: {
     marginRight: -theme.rem(0.5),
     overflow: 'visible'