[WEB-1047] chore: create page modal improvement (#4266)

* chore: create page modal improvement

* chore: create page modal improvement

web/components/pages/modals/page-form.tsx

@@ -35,18 +35,14 @@ export const PageForm: React.FC<Props> = (props) => {
     }
   };
 
+  const isTitleLengthMoreThan255Character = formData.name ? formData.name.length > 255 : false;
+
   return (
     <form onSubmit={handlePageFormSubmit}>
       <div className="space-y-4">
         <h3 className="text-lg font-medium leading-6 text-custom-text-100">Create Page</h3>
 
         <div className="space-y-2">
-          <div>
-            <div className="text-custom-text-200">Name</div>
-            <div className="text-xs text-custom-text-300">
-              Max length of the name should be less than 255 characters
-            </div>
-          </div>
           <Input
             id="name"
             type="text"
@@ -56,8 +52,10 @@ export const PageForm: React.FC<Props> = (props) => {
             className="w-full resize-none text-lg"
             tabIndex={1}
             required
-            maxLength={255}
           />
+          {isTitleLengthMoreThan255Character && (
+            <span className="text-xs text-red-500">Max length of the name should be less than 255 characters</span>
+          )}
         </div>
       </div>
 
@@ -95,7 +93,14 @@ export const PageForm: React.FC<Props> = (props) => {
           <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={4}>
             Cancel
           </Button>
-          <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={5}>
+          <Button
+            variant="primary"
+            size="sm"
+            type="submit"
+            loading={isSubmitting}
+            disabled={isTitleLengthMoreThan255Character}
+            tabIndex={5}
+          >
             {isSubmitting ? "Creating" : "Create Page"}
           </Button>
         </div>