Add about to top of fold page on mobile. Layout tweaks

web/components/edit-fold-button.tsx

@@ -10,8 +10,8 @@ import { toCamelCase } from '../lib/util/format'
 import { Spacer } from './layout/spacer'
 import { TagsList } from './tags-list'
 
-export function EditFoldButton(props: { fold: Fold }) {
+export function EditFoldButton(props: { fold: Fold; className?: string }) {
-  const { fold } = props
+  const { fold, className } = props
   const [name, setName] = useState(fold.name)
   const [about, setAbout] = useState(fold.about ?? '')
 
@@ -41,7 +41,7 @@ export function EditFoldButton(props: { fold: Fold }) {
   }
 
   return (
-    <div>
+    <div className={clsx('p-1', className)}>
       <label
         htmlFor="edit"
         className={clsx(

web/pages/fold/[...slugs]/index.tsx

@@ -153,14 +153,24 @@ export default function FoldPage(props: {
 
   return (
     <Page wide>
-      <Col className="items-center">
+      <Row className="justify-between mb-6 px-1">
-        <Col className="max-w-5xl w-full">
-          <Col className="sm:flex-row sm:justify-between sm:items-end gap-4 mb-6">
         <Title className="!m-0" text={fold.name} />
-            {isCurator && <EditFoldButton fold={fold} />}
+        {isCurator && <EditFoldButton className="ml-1" fold={fold} />}
+      </Row>
+
+      <Col className="md:hidden text-gray-500 gap-2 mb-6 px-1">
+        <Row>
+          <div className="mr-1">Curated by</div>
+          <UserLink
+            className="text-neutral"
+            name={curator.name}
+            username={curator.username}
+          />
+        </Row>
+        <div>{fold.about}</div>
       </Col>
 
-          <div className="tabs mb-4">
+      <div className="tabs mb-2">
         <Link href={foldPath(fold)} shallow>
           <a
             className={clsx(
@@ -195,14 +205,24 @@ export default function FoldPage(props: {
         </Link>
       </div>
 
-          {page === 'activity' && (
+      {(page === 'activity' || page === 'markets') && (
-            <Row className="gap-8">
+        <Row className={clsx(page === 'activity' ? 'gap-16' : 'gap-8')}>
-              <Col>
+          <Col className="flex-1">
+            {page === 'activity' ? (
               <ActivityFeed
                 contracts={activeContracts}
                 contractBets={activeContractBets}
                 contractComments={activeContractComments}
               />
+            ) : (
+              <SearchableGrid
+                contracts={contracts}
+                query={query}
+                setQuery={setQuery}
+                sort={sort}
+                setSort={setSort}
+              />
+            )}
           </Col>
           <Col className="hidden md:flex max-w-xs gap-10">
             <FoldOverview fold={fold} curator={curator} />
@@ -216,18 +236,6 @@ export default function FoldPage(props: {
         </Row>
       )}
 
-          {page === 'markets' && (
-            <div className="w-full">
-              <SearchableGrid
-                contracts={contracts}
-                query={query}
-                setQuery={setQuery}
-                sort={sort}
-                setSort={setSort}
-              />
-            </div>
-          )}
-
       {page === 'leaderboards' && (
         <Col className="gap-8 lg:flex-row">
           <FoldLeaderboards
@@ -238,8 +246,6 @@ export default function FoldPage(props: {
           />
         </Col>
       )}
-        </Col>
-      </Col>
     </Page>
   )
 }
@@ -250,10 +256,10 @@ function FoldOverview(props: { fold: Fold; curator: User }) {
 
   return (
     <Col className="max-w-sm">
-      <div className="px-4 py-3 bg-indigo-700 text-white text-sm rounded-t">
+      <div className="px-4 py-3 bg-indigo-500 text-white text-sm rounded-t">
         About community
       </div>
-      <Col className="p-4 bg-white self-start gap-2 rounded-b">
+      <Col className="p-4 bg-white gap-2 rounded-b">
         <Row>
           <div className="text-gray-500 mr-1">Curated by</div>
           <UserLink