Enforce 25 character titles on front end

app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx

@@ -36,8 +36,12 @@ const EditableProjectTitle = ({
       toast.success('Project updated.')
     },
   })
-  const onTitleChange = ({ target }) =>
+  const onTitleChange = ({ target }) => {
-    setNewTitle(target.value.replace(/([^a-zA-Z\d_:])/g, '-'))
+    if (target.value.length > 25) {
+      toast.error('Titles must be 25 or less characters')
+    }
+    setNewTitle(target.value.replace(/([^a-zA-Z\d_:])/g, '-').slice(0, 25))
+  }
   return (
     <>
       {!inEditMode && (
@@ -68,7 +72,7 @@ const EditableProjectTitle = ({
           <span className="flex items-center ml-4 border border-ch-gray-300 rounded-sm">
             <span className="ml-1">/</span>
             <input
-              className="pl-1 bg-ch-gray-900"
+              className="pl-1 w-64 bg-ch-gray-900"
               value={newTitle}
               onChange={onTitleChange}
               ref={inputRef}

app/web/src/pages/ProjectPage/ProjectPage.tsx

@@ -4,6 +4,7 @@ import ProjectCell from 'src/components/ProjectCell'
 import Seo from 'src/components/Seo/Seo'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import { IdeContext } from 'src/helpers/hooks/useIdeContext'
+import { Toaster } from '@redwoodjs/web/toast'
 
 const ProjectPage = ({ userName, projectTitle }) => {
   const { currentUser } = useAuth()
@@ -11,6 +12,7 @@ const ProjectPage = ({ userName, projectTitle }) => {
   return (
     <>
       <Seo title={projectTitle} description={projectTitle} lang="en-US" />
+      <Toaster timeout={1500} />
       <IdeContext.Provider value={{ state, thunkDispatch, project: null }}>
         <ProjectCell
           userName={userName}