Clean up some markup around the top of the page (#189)

* Remove unnecessary wrapper div around sidebar

* Remove extra column used for alignment on homepage

* Remove extra wrapper div around whole page

web/components/nav/nav-bar.tsx

@@ -137,7 +137,7 @@ export function MobileSidebar(props: {
                 </div>
               </Transition.Child>
               <div className="mx-2 mt-5 h-0 flex-1 overflow-y-auto">
-                <Sidebar />
+                <Sidebar className="pl-2" />
               </div>
             </div>
           </Transition.Child>

web/components/nav/sidebar.tsx

@@ -110,7 +110,8 @@ function MoreButton() {
   )
 }
 
-export default function Sidebar() {
+export default function Sidebar(props: { className?: string }) {
+  const { className } = props
   const router = useRouter()
   const currentPage = router.pathname
 
@@ -124,7 +125,7 @@ export default function Sidebar() {
     user === null ? signedOutMobileNavigation : mobileNavigation
 
   return (
-    <nav aria-label="Sidebar" className="sticky top-4 divide-gray-300 pl-2">
+    <nav aria-label="Sidebar" className={className}>
       <div className="space-y-1 pb-6">
         <ManifoldLogo twoLine />
       </div>

web/components/page.tsx

@@ -12,7 +12,7 @@ export function Page(props: {
   const { margin, assertUser, children, rightSidebar, suspend } = props
 
   return (
-    <div>
+    <>
       <div
         className={clsx(
           'mx-auto w-full pb-14 lg:grid lg:grid-cols-12 lg:gap-8 lg:pt-6 xl:max-w-7xl',
@@ -20,9 +20,7 @@ export function Page(props: {
         )}
         style={suspend ? visuallyHiddenStyle : undefined}
       >
-        <div className="hidden lg:col-span-2 lg:block">
-          <Sidebar />
-        </div>
+        <Sidebar className="sticky top-4 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
         <main
           className={clsx(
             'lg:col-span-8',
@@ -40,7 +38,7 @@ export function Page(props: {
       </div>
 
       <BottomNavBar />
-    </div>
+    </>
   )
 }
 

web/pages/home.tsx

@@ -40,27 +40,20 @@ const Home = () => {
   return (
     <>
       <Page assertUser="signed-in" suspend={!!contract}>
-        <Col className="items-center">
-          <Col className="w-full max-w-[700px]">
-            <FeedCreate user={user ?? undefined} />
-            <Spacer h={2} />
-
-            <CategorySelector user={user} />
-
-            <Spacer h={1} />
-
-            {feed ? (
-              <ActivityFeed
-                feed={feed}
-                mode="only-recent"
-                getContractPath={(c) =>
-                  `home?u=${c.creatorUsername}&s=${c.slug}`
-                }
-              />
-            ) : (
-              <LoadingIndicator className="mt-4" />
-            )}
-          </Col>
+        <Col className="mx-auto w-full max-w-[700px]">
+          <FeedCreate user={user ?? undefined} />
+          <Spacer h={2} />
+          <CategorySelector user={user} />
+          <Spacer h={1} />
+          {feed ? (
+            <ActivityFeed
+              feed={feed}
+              mode="only-recent"
+              getContractPath={(c) => `home?u=${c.creatorUsername}&s=${c.slug}`}
+            />
+          ) : (
+            <LoadingIndicator className="mt-4" />
+          )}
         </Col>
       </Page>