Fix border on some listing screens (#5115)

* Fix border on PostQuotes, add debug atom

* Add util_screen_outer, apply to h_full_vh here needed

6 files changed, 24 insertions, 6 deletions

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 429a06072..d2e7ffc2e 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -1,9 +1,14 @@
-import {Platform, StyleSheet} from 'react-native'
+import {Platform, StyleSheet, ViewStyle} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
 
 export const atoms = {
+  debug: {
+    borderColor: 'red',
+    borderWidth: 1,
+  },
+
   /*
    * Positioning
    */
@@ -55,6 +60,19 @@ export const atoms = {
     height: '100vh',
   }),
 
+  /**
+   * Used for the outermost components on screens, to ensure that they can fill
+   * the screen and extend beyond.
+   */
+  util_screen_outer: [
+    web({
+      minHeight: '100vh',
+    }),
+    native({
+      height: '100%',
+    }),
+  ] as ViewStyle,
+
   /*
    * Theme-independent bg colors
    */
diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx
index eab9e2d27..ea522488c 100644
--- a/src/screens/Post/PostLikedBy.tsx
+++ b/src/screens/Post/PostLikedBy.tsx
@@ -27,7 +27,7 @@ export const PostLikedByScreen = ({route}: Props) => {
   )
 
   return (
-    <CenteredView style={a.h_full_vh} sideBorders={true}>
+    <CenteredView style={a.util_screen_outer} sideBorders={true}>
       <ListHeaderDesktop title={_(msg`Liked By`)} />
       <ViewHeader title={_(msg`Liked By`)} showBorder={!isWeb} />
       <PostLikedByComponent uri={uri} />
diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx
index 4a06639fc..0d59418f1 100644
--- a/src/screens/Post/PostQuotes.tsx
+++ b/src/screens/Post/PostQuotes.tsx
@@ -27,7 +27,7 @@ export const PostQuotesScreen = ({route}: Props) => {
   )
 
   return (
-    <CenteredView style={a.h_full_vh} sideBorders={true}>
+    <CenteredView style={a.util_screen_outer} sideBorders={true}>
       <ListHeaderDesktop title={_(msg`Quotes`)} />
       <ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} />
       <PostQuotesComponent uri={uri} />
diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx
index 2a8ef1e0f..f8c058ff7 100644
--- a/src/screens/Post/PostRepostedBy.tsx
+++ b/src/screens/Post/PostRepostedBy.tsx
@@ -27,7 +27,7 @@ export const PostRepostedByScreen = ({route}: Props) => {
   )
 
   return (
-    <CenteredView style={a.h_full_vh} sideBorders={true}>
+    <CenteredView style={a.util_screen_outer} sideBorders={true}>
       <ListHeaderDesktop title={_(msg`Reposted By`)} />
       <ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} />
       <PostRepostedByComponent uri={uri} />
diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx
index 68447bd77..3a01edff5 100644
--- a/src/view/screens/ProfileFollowers.tsx
+++ b/src/view/screens/ProfileFollowers.tsx
@@ -25,7 +25,7 @@ export const ProfileFollowersScreen = ({route}: Props) => {
   )
 
   return (
-    <CenteredView style={a.h_full_vh} sideBorders={true}>
+    <CenteredView style={a.util_screen_outer} sideBorders={true}>
       <ListHeaderDesktop title={_(msg`Followers`)} />
       <ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
       <ProfileFollowersComponent name={name} />
diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx
index 7cc10ffd1..762a84a37 100644
--- a/src/view/screens/ProfileFollows.tsx
+++ b/src/view/screens/ProfileFollows.tsx
@@ -25,7 +25,7 @@ export const ProfileFollowsScreen = ({route}: Props) => {
   )
 
   return (
-    <CenteredView style={a.h_full_vh} sideBorders={true}>
+    <CenteredView style={a.util_screen_outer} sideBorders={true}>
       <ListHeaderDesktop title={_(msg`Following`)} />
       <ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
       <ProfileFollowsComponent name={name} />