client: fix hydration error with placeholder for post title

client/components/edit-document/index.tsx

@@ -82,7 +82,7 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
     if (skeleton) {
         return <>
             <Spacer height={1} />
-            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
+            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 'var(--main-content)', margin: "0 auto" }}>
                 <div className={styles.fileNameContainer}>
                     <Skeleton width={275} height={36} />
                     {remove && <Skeleton width={36} height={36} />}
@@ -98,7 +98,7 @@ const Document = ({ remove, title, content, setTitle, setContent, initialTab = '
     return (
         <>
             <Spacer height={1} />
-            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
+            <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 'var(--main-content)', margin: "0 auto" }}>
                 <div className={styles.fileNameContainer}>
                     <Input
                         placeholder="MyFile.md"

client/components/new-post/title/index.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, memo, useCallback } from 'react'
+import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react'
 import { Text } from '@geist-ui/core'
 
 import ShiftBy from '@components/shift-by'
@@ -21,11 +21,16 @@ type props = {
 }
 
 const Title = ({ onChange, title }: props) => {
+    const [placeholder, setPlaceholder] = useState(titlePlaceholders[0])
+    useEffect(() => {
+        // set random placeholder on load
+        setPlaceholder(titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)])
+    }, [])
     return (<div className={styles.title}>
         <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
         <ShiftBy y={-3}>
             <Input
-                placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
+                placeholder={placeholder}
                 value={title || ""}
                 onChange={onChange}
                 height={"55px"}