Prevent header jump on mobile.

web/components/manifold-logo.tsx

@@ -2,12 +2,15 @@ import Link from 'next/link'
 import Image from 'next/image'
 import clsx from 'clsx'
 
-export function ManifoldLogo(props: { darkBackground?: boolean }) {
-  const { darkBackground } = props
+export function ManifoldLogo(props: {
+  className?: string
+  darkBackground?: boolean
+}) {
+  const { darkBackground, className } = props
 
   return (
     <Link href="/">
-      <a className="flex flex-row gap-4 flex-shrink-0">
+      <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
         <Image
           className="hover:rotate-12 transition-all"
           src={darkBackground ? '/logo-white.svg' : '/logo.svg'}

web/components/nav-bar.tsx

@@ -28,7 +28,7 @@ export function NavBar(props: {
           wide ? 'max-w-6xl' : 'max-w-4xl'
         )}
       >
-        <ManifoldLogo darkBackground={darkBackground} />
+        <ManifoldLogo className="my-1" darkBackground={darkBackground} />
 
         <Row className="items-center gap-6 sm:gap-8 ml-6">
           {(user || user === null) && (