From 48a8e9f6a97f584b76f5ef426751932c22bcb7d7 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Wed, 23 Mar 2022 15:40:47 -0700
Subject: [PATCH] client: fix hydration error with placeholder for post title

---
 client/components/edit-document/index.tsx  | 4 ++--
 client/components/new-post/title/index.tsx | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/components/edit-document/index.tsx b/client/components/edit-document/index.tsx
index 4d6ab562..0bd2ff19 100644
--- a/client/components/edit-document/index.tsx
+++ b/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"
diff --git a/client/components/new-post/title/index.tsx b/client/components/new-post/title/index.tsx
index e5b5f82f..9d4c453c 100644
--- a/client/components/new-post/title/index.tsx
+++ b/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"}