From ddda612c1187ab679edc88677d9ebbcd40386672 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 3 Sep 2024 13:50:48 -0500
Subject: [PATCH] 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
---
 src/alf/atoms.ts                      | 20 +++++++++++++++++++-
 src/screens/Post/PostLikedBy.tsx      |  2 +-
 src/screens/Post/PostQuotes.tsx       |  2 +-
 src/screens/Post/PostRepostedBy.tsx   |  2 +-
 src/view/screens/ProfileFollowers.tsx |  2 +-
 src/view/screens/ProfileFollows.tsx   |  2 +-
 6 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 429a0607..d2e7ffc2 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 eab9e2d2..ea522488 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 4a06639f..0d59418f 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 2a8ef1e0..f8c058ff 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 68447bd7..3a01edff 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 7cc10ffd..762a84a3 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} />