Feed container markup cleanup (#173)

* Move FeedContainer stuff into ActivityFeed

* Greatly clean up ActivityFeed container markup

web/components/answers/answers-panel.tsx

@@ -111,7 +111,7 @@ export function AnswersPanel(props: {
         <FeedItems
           contract={contract}
           items={answerItems}
-          className={''}
+          className={'pr-2 md:pr-0'}
           betRowClassName={''}
         />
       )}

web/components/feed/activity-feed.tsx

@@ -17,51 +17,24 @@ export function ActivityFeed(props: {
   getContractPath?: (contract: Contract) => string
 }) {
   const { feed, mode, getContractPath } = props
-
   const user = useUser()
 
   return (
-    <FeedContainer
+    <Col className="divide-y divide-gray-300 bg-white">
-      feed={feed}
+      {feed.map((item) => (
-      renderItem={({ contract, recentBets, recentComments }) => (
         <ContractActivity
+          key={item.contract.id}
+          className="py-6 px-2 sm:px-4"
           user={user}
-          contract={contract}
+          contract={item.contract}
-          bets={recentBets}
+          bets={item.recentBets}
-          comments={recentComments}
+          comments={item.recentComments}
           mode={mode}
-          contractPath={getContractPath ? getContractPath(contract) : undefined}
+          contractPath={
+            getContractPath ? getContractPath(item.contract) : undefined
+          }
         />
-      )}
+      ))}
-    />
-  )
-}
-
-function FeedContainer(props: {
-  feed: {
-    contract: Contract
-    recentBets: Bet[]
-    recentComments: Comment[]
-  }[]
-  renderItem: (item: {
-    contract: Contract
-    recentBets: Bet[]
-    recentComments: Comment[]
-  }) => any
-}) {
-  const { feed, renderItem } = props
-
-  return (
-    <Col className="items-center">
-      <Col className="w-full max-w-3xl">
-        <Col className="w-full divide-y divide-gray-300 self-center bg-white">
-          {feed.map((item) => (
-            <div key={item.contract.id} className="py-6 px-2 sm:px-4">
-              {renderItem(item)}
-            </div>
-          ))}
-        </Col>
-      </Col>
     </Col>
   )
 }

web/components/feed/feed-items.tsx

@@ -65,7 +65,7 @@ export function FeedItems(props: {
   useSaveSeenContract(ref, contract)
 
   return (
-    <div className={clsx('flow-root pr-2 md:pr-0', className)} ref={ref}>
+    <div className={clsx('flow-root', className)} ref={ref}>
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
           <div