interface: fix urbit/landscape #749

pkg/interface/src/views/landscape/components/Home/GroupFeed.tsx

@@ -62,6 +62,7 @@ function GroupFeed(props) {
       width="100%"
       height="100%"
       display="flex"
+      overflow="hidden"
       position="relative"
       alignItems="center"
     >

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx

@@ -7,6 +7,7 @@ import GlobalApi from '~/logic/api/global';
 import { resourceFromPath } from '~/logic/lib/group';
 import VirtualScroller from '~/views/components/VirtualScroller';
 import PostItem from './PostItem/PostItem';
+import PostInput from './PostInput';
 
 const virtualScrollerStyle = {
   height: '100%'
@@ -107,6 +108,44 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
           />
         </React.Fragment>
       );
+    } else if (index.eq(first ?? bigInt.zero)) {
+      return (
+        <Col
+          width="100%"
+          alignItems="center"
+          key={index.toString()}
+          ref={ref}>
+          <Col
+            width="100%"
+            maxWidth="616px"
+            pt={3}
+            pl={2}
+            pr={2}
+            mb={3}>
+            <PostInput
+              api={api}
+              group={group}
+              association={association}
+              vip={vip}
+              graphPath={graphPath}
+            />
+          </Col>
+          <PostItem
+            node={node}
+            graphPath={graphPath}
+            association={association}
+            api={api}
+            index={[...nodeIndex, index]}
+            baseUrl={baseUrl}
+            history={history}
+            parentPost={parentNode?.post}
+            isReply={Boolean(parentNode)}
+            isRelativeTime={true}
+            vip={vip}
+            group={group}
+          />
+        </Col>
+      );
     }
 
     return (
@@ -143,6 +182,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
 
     if (newer) {
       const [index] = graph.peekLargest();
+      //  TODO: replace this with deep something
       await api.graph.getYoungerSiblings(
         ship,
         name,
@@ -170,6 +210,9 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
       history
     } = this.props;
 
+    //  TODO: memoize flattening the graph,
+    //  take in a prop on whether to flatten the graph or not
+
     return (
       <Col width="100%" height="100%" position="relative">
         <VirtualScroller

pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx

@@ -82,26 +82,7 @@ const PostTimeline = (props: PostTimelineProps): ReactElement => {
   }
 
   return (
-    <>
-      <Box
-        width="100%"
-        maxWidth="616px"
-        pt={3}
-        pl={2}
-        pr={2}
-        mb={3}
-        flexDirection="column"
-        alignItems="center"
-      >
-        <PostInput
-          api={api}
-          group={group}
-          association={association}
-          vip={vip}
-          graphPath={graphPath}
-        />
-      </Box>
-      <Box height="calc(100% - 176px)" width="100%" alignItems="center" pl={1}>
+    <Box height="calc(100% - 48px)" width="100%" alignItems="center" pl={1}>
       <PostFeed
         key={graphPath}
         graphPath={graphPath}
@@ -114,7 +95,6 @@ const PostTimeline = (props: PostTimelineProps): ReactElement => {
         baseUrl={baseUrl}
       />
     </Box>
-    </>
   );
 }