From d5f0df8fc4929789d404e7ae71de137d3341015c Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 13:45:43 +0530
Subject: [PATCH 01/10] chore: update @makeplane/propel version in
 pnpm-lock.yaml to 0.3.0

---
 pnpm-lock.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7e8251a913..c1091fa51f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -876,7 +876,7 @@ importers:
         version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@makeplane/propel':
         specifier: 'catalog:'
-        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../../packages/constants

From 6fc88e2ba1bd283dbb6ec56e12255656405c09fd Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 13:56:10 +0530
Subject: [PATCH 02/10] refactor: replace TextArea usage with TextAreaGroup in
 forms

Updated various forms across the application to utilize TextAreaGroup for better structure and error handling. This change enhances the consistency of the description fields in forms, ensuring they are wrapped in a Field component for validation and styling. The updates were made in the CreateApiTokenForm, CycleForm, ModuleForm, ProjectDetailsForm, and others.
---
 .../core/components/api-token/modal/form.tsx  | 21 ++++++----
 .../analytics-sidebar/sidebar-details.tsx     | 11 +----
 apps/web/core/components/cycles/form.tsx      | 25 ++++++-----
 .../core/components/issues/title-input.tsx    | 42 +++++++++----------
 .../modules/analytics-sidebar/root.tsx        | 11 ++---
 apps/web/core/components/modules/form.tsx     | 27 ++++++------
 .../core/components/pages/editor/title.tsx    | 12 +++---
 .../project-states/create-update/form.tsx     | 25 ++++++-----
 .../project/create/common-attributes.tsx      | 34 ++++++++-------
 apps/web/core/components/project/form.tsx     | 26 +++++++-----
 apps/web/core/components/views/form.tsx       | 26 +++++++-----
 .../core/components/workspace/views/form.tsx  | 24 ++++++-----
 12 files changed, 152 insertions(+), 132 deletions(-)

diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 7d799ff1f43..14281584df7 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -11,13 +11,14 @@ import { CalendarOutline } from "@makeplane/propel/icons";
 // types
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IApiToken } from "@plane/types";
 // ui
 import { Switch } from "@makeplane/propel/components/switch";
-import { CustomSelect, TextArea } from "@plane/ui";
+import { CustomSelect } from "@plane/ui";
 import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -166,13 +167,17 @@ export function CreateApiTokenForm(props: Props) {
             control={control}
             name="description"
             render={({ field: { value, onChange } }) => (
-              <TextArea
-                value={value}
-                onChange={onChange}
-                hasError={Boolean(errors.description)}
-                placeholder={t("description")}
-                className="min-h-24 w-full resize-none text-14"
-              />
+              <Field name="description" invalid={Boolean(errors.description)}>
+                <TextAreaGroup>
+                  <TextArea
+                    size="lg"
+                    surface="field"
+                    value={value}
+                    onChange={onChange}
+                    placeholder={t("description")}
+                  />
+                </TextAreaGroup>
+              </Field>
             )}
           />
           <div className="flex items-center justify-between gap-2">
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index e627c1b99be..7bdd5d182a2 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -12,9 +12,8 @@ import { MembersOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/pro
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Avatar } from "@makeplane/propel/components/avatar";
+import { TextArea } from "@makeplane/propel/components/text-area";
 import type { ICycle } from "@plane/types";
-// plane ui
-import { TextArea } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -68,13 +67,7 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
         : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
   return (
     <div className="flex w-full flex-col gap-5">
-      {cycleDetails?.description && (
-        <TextArea
-          className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
-          value={cycleDetails.description}
-          disabled
-        />
-      )}
+      {cycleDetails?.description && <TextArea size="lg" surface="inline" value={cycleDetails.description} disabled />}
 
       <div className="flex flex-col gap-5 pt-2.5 pb-6">
         <div className="flex items-center justify-start gap-1">
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index ff2448c7cf1..d975ba66d40 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -9,13 +9,12 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices } from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { ICycle } from "@plane/types";
-// ui
-import { TextArea } from "@plane/ui";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -139,15 +138,19 @@ export function CycleForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  name="description"
-                  placeholder={t("description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  value={value}
-                  onChange={onChange}
-                  tabIndex={getIndex("description")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup>
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      name="description"
+                      placeholder={t("description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index ce82b0e7225..db2cfe17611 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -6,10 +6,10 @@
 
 import { useState, useEffect, useCallback, useRef } from "react";
 import { observer } from "mobx-react";
+import { Field } from "@makeplane/propel/components/field";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
 import type { TNameDescriptionLoader } from "@plane/types";
-// components
-import { TextArea } from "@plane/ui";
 // types
 import { cn } from "@plane/utils";
 import useDebounce from "@/hooks/use-debounce";
@@ -39,7 +39,6 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
     issueId,
     issueOperations,
     projectId,
-    className,
     containerClassName,
   } = props;
   const { t } = useTranslation();
@@ -132,7 +131,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
   );
 
   const handleTitleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
       setIsSubmitting("submitting");
       const titleFromEvent = e.target.value;
       setTitle(titleFromEvent);
@@ -147,26 +146,25 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
   return (
     <div className="flex flex-col gap-1.5">
       <div className={cn("relative", containerClassName)}>
-        <TextArea
-          id="title-input"
-          className={cn(
-            "block w-full resize-none overflow-hidden rounded-sm border-none bg-transparent px-3 py-0 text-20 font-medium ring-0 outline-none",
-            {
-              "mx-2.5 ring-1 ring-danger-strong": title?.length === 0,
-            },
-            className
-          )}
-          disabled={disabled}
-          value={title}
-          onChange={handleTitleChange}
-          maxLength={255}
-          placeholder={t("issue.title.label")}
-          onFocus={() => setIsLengthVisible(true)}
-          onBlur={() => setIsLengthVisible(false)}
-        />
+        <Field name="title" invalid={title?.length === 0}>
+          <TextAreaGroup>
+            <TextArea
+              size="2xl"
+              surface="field"
+              id="title-input"
+              disabled={disabled}
+              value={title}
+              onChange={handleTitleChange}
+              maxLength={255}
+              placeholder={t("issue.title.label")}
+              onFocus={() => setIsLengthVisible(true)}
+              onBlur={() => setIsLengthVisible(false)}
+            />
+          </TextAreaGroup>
+        </Field>
         <div
           className={cn(
-            "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+            "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 7c31983fa35..1ca08b76b44 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -26,7 +26,8 @@ import { ModuleStatusIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
-import { Loader, CustomSelect, TextArea } from "@plane/ui";
+import { Loader, CustomSelect } from "@plane/ui";
+import { TextArea } from "@makeplane/propel/components/text-area";
 // components
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -233,15 +234,11 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
               )}
             />
           </div>
-          <h4 className="w-full text-18 font-semibold break-words text-primary">{moduleDetails.name}</h4>
+          <h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
         </div>
 
         {moduleDetails.description && (
-          <TextArea
-            className="ring-none !m-0 max-h-max w-full resize-none !border-0 bg-transparent !p-0 text-13 leading-5 text-secondary outline-none"
-            value={moduleDetails.description}
-            disabled
-          />
+          <TextArea size="lg" surface="inline" value={moduleDetails.description} disabled />
         )}
 
         <div className="flex flex-col gap-5 pt-2.5 pb-6">
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 3eb632eff76..855409dc921 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -9,12 +9,11 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { IModule } from "@plane/types";
-// ui
-import { TextArea } from "@plane/ui";
 import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns/date-range";
@@ -150,16 +149,20 @@ export function ModuleForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  value={value}
-                  onChange={onChange}
-                  placeholder={t("description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  tabIndex={getIndex("description")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup>
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      id="description"
+                      name="description"
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("description")}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index ed0b853fafa..fb22660979a 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -6,10 +6,9 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { TextArea } from "@makeplane/propel/components/text-area";
 // editor
 import type { EditorRefApi } from "@plane/editor";
-// ui
-import { TextArea } from "@plane/ui";
 import { cn, getPageName } from "@plane/utils";
 // helpers
 // hooks
@@ -35,7 +34,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
   });
 
   return (
-    <div className="relative w-full flex-shrink-0 py-3">
+    <div className="relative w-full shrink-0 py-3">
       {readOnly ? (
         <h6
           className={cn(
@@ -43,7 +42,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
             {
               "text-placeholder": !title,
             },
-            "break-words"
+            "wrap-break-word"
           )}
         >
           {getPageName(title)}
@@ -51,7 +50,8 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
       ) : (
         <div className="relative">
           <TextArea
-            className={cn(titleFontClassName, "block w-full resize-none rounded-none border-none p-0 outline-none")}
+            size={fontSize === "small-font" ? "xl" : "2xl"}
+            surface="inline"
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
@@ -68,7 +68,7 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           />
           <div
             className={cn(
-              "pointer-events-none absolute right-1 bottom-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
+              "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
               {
                 "opacity-100": isLengthVisible,
               }
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 4518271b812..140e480793d 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -8,9 +8,10 @@ import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { Button } from "@plane/propel/button";
 import type { IState } from "@plane/types";
-import { Popover, TextArea } from "@plane/ui";
+import { Popover } from "@plane/ui";
 type TStateForm = {
   data: Partial<IState>;
   onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
@@ -91,15 +92,19 @@ export function StateForm(props: TStateForm) {
         </Field>
 
         {/* description */}
-        <TextArea
-          id="description"
-          name="description"
-          placeholder="Describe this state for your members."
-          value={formData?.description}
-          onChange={(e) => handleFormData("description", e.target.value)}
-          hasError={(errors && Boolean(errors.description)) || false}
-          className="min-h-14 w-full resize-none text-13"
-        />
+        <Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
+          <TextAreaGroup>
+            <TextArea
+              size="lg"
+              surface="field"
+              id="description"
+              name="description"
+              placeholder="Describe this state for your members."
+              value={formData?.description}
+              onChange={(e) => handleFormData("description", e.target.value)}
+            />
+          </TextAreaGroup>
+        </Field>
 
         <div className="flex items-center space-x-2">
           <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index 949faaa22d7..adfcad527a1 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -9,6 +9,7 @@ import type { UseFormSetValue } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { InfoOutline } from "@makeplane/propel/icons";
 // plane imports
 import { ETabIndices } from "@plane/constants";
@@ -16,8 +17,7 @@ import { useTranslation } from "@plane/i18n";
 import type { TProject } from "@plane/types";
 // ui
 import { Tooltip } from "@makeplane/propel/components/tooltip";
-import { TextArea } from "@plane/ui";
-import { cn, projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
+import { projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
 
 type Props = {
   setValue: UseFormSetValue<TProject>;
@@ -139,19 +139,23 @@ function ProjectCommonAttributes(props: Props) {
           name="description"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <TextArea
-              id="description"
-              name="description"
-              value={value}
-              placeholder={t("description")}
-              onChange={(e) => {
-                onChange(e);
-                handleFormOnChange?.();
-              }}
-              className="focus:border-blue-400 !h-24 text-13"
-              hasError={Boolean(errors?.description)}
-              tabIndex={getIndex("description")}
-            />
+            <Field name="description" invalid={Boolean(errors?.description)}>
+              <TextAreaGroup>
+                <TextArea
+                  size="lg"
+                  surface="field"
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder={t("description")}
+                  onChange={(e) => {
+                    onChange(e);
+                    handleFormOnChange?.();
+                  }}
+                  tabIndex={getIndex("description")}
+                />
+              </TextAreaGroup>
+            </Field>
           )}
         />
       </div>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index b863594a36a..ed594165e55 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -9,6 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 import { InfoOutline, LockOutline } from "@makeplane/propel/icons";
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
@@ -18,7 +19,7 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EFileAssetType } from "@plane/types";
 import type { IProject, IWorkspace } from "@plane/types";
-import { CustomSelect, TextArea } from "@plane/ui";
+import { CustomSelect } from "@plane/ui";
 import { renderFormattedDate } from "@plane/utils";
 import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
@@ -313,16 +314,19 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
             name="description"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TextArea
-                id="description"
-                name="description"
-                value={value}
-                placeholder={t("project_description_placeholder")}
-                onChange={onChange}
-                className="min-h-[102px] text-13 font-medium"
-                hasError={Boolean(errors?.description)}
-                disabled={!isAdmin}
-              />
+              <Field name="description" invalid={Boolean(errors?.description)} disabled={!isAdmin}>
+                <TextAreaGroup>
+                  <TextArea
+                    size="lg"
+                    surface="field"
+                    id="description"
+                    name="description"
+                    value={value}
+                    placeholder={t("project_description_placeholder")}
+                    onChange={onChange}
+                  />
+                </TextAreaGroup>
+              </Field>
             )}
           />
         </div>
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 5c4ce12f016..0712fbaf11f 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -10,6 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -23,7 +24,6 @@ import type {
   IIssueFilters,
 } from "@plane/types";
 import { EViewAccess, EIssuesStoreType } from "@plane/types";
-import { TextArea } from "@plane/ui";
 import { getComputedDisplayFilters, getComputedDisplayProperties, getTabIndex } from "@plane/utils";
 // components
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -190,16 +190,20 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  placeholder={t("common.description")}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                  value={value}
-                  onChange={onChange}
-                  tabIndex={getIndex("descriptions")}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup>
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      id="description"
+                      name="description"
+                      placeholder={t("common.description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("descriptions")}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 73350a9b075..2f3444a4a30 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -9,12 +9,12 @@ import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { Field } from "@makeplane/propel/components/field";
 import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IWorkspaceView, IIssueFilters } from "@plane/types";
 import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
-import { TextArea } from "@plane/ui";
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
 // components
 import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -115,15 +115,19 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
               name="description"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TextArea
-                  id="description"
-                  name="description"
-                  value={value}
-                  placeholder={t("common.description")}
-                  onChange={onChange}
-                  className="min-h-24 w-full resize-none text-14"
-                  hasError={Boolean(errors?.description)}
-                />
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup>
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      id="description"
+                      name="description"
+                      value={value}
+                      placeholder={t("common.description")}
+                      onChange={onChange}
+                    />
+                  </TextAreaGroup>
+                </Field>
               )}
             />
           </div>

From 531ded05b9619b61a1494500cd30a74e8b9d8998 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 14:43:37 +0530
Subject: [PATCH 03/10] refactor: enhance TextArea components across forms with
 auto-resize and maxRows

Updated various forms to improve the TextArea components by adding auto-resize functionality and setting a maximum number of rows. This change enhances user experience by allowing better visibility and management of text input across the CreateApiTokenForm, CycleForm, ModuleForm, ProjectDetailsForm, and others.
---
 apps/web/core/components/api-token/modal/form.tsx             | 4 +++-
 .../components/cycles/analytics-sidebar/sidebar-details.tsx   | 4 +++-
 apps/web/core/components/cycles/form.tsx                      | 4 +++-
 apps/web/core/components/issues/title-input.tsx               | 4 +++-
 apps/web/core/components/modules/analytics-sidebar/root.tsx   | 2 +-
 apps/web/core/components/modules/form.tsx                     | 4 +++-
 apps/web/core/components/pages/editor/title.tsx               | 2 ++
 .../web/core/components/project-states/create-update/form.tsx | 4 +++-
 apps/web/core/components/project/create/common-attributes.tsx | 4 +++-
 apps/web/core/components/project/form.tsx                     | 4 +++-
 apps/web/core/components/views/form.tsx                       | 4 +++-
 apps/web/core/components/workspace/views/form.tsx             | 4 +++-
 12 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index 14281584df7..3cd99030013 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -168,10 +168,12 @@ export function CreateApiTokenForm(props: Props) {
             name="description"
             render={({ field: { value, onChange } }) => (
               <Field name="description" invalid={Boolean(errors.description)}>
-                <TextAreaGroup>
+                <TextAreaGroup resize="none">
                   <TextArea
                     size="lg"
                     surface="field"
+                    autoResize
+                    maxRows={8}
                     value={value}
                     onChange={onChange}
                     placeholder={t("description")}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index 7bdd5d182a2..a896096da2d 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -67,7 +67,9 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
         : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
   return (
     <div className="flex w-full flex-col gap-5">
-      {cycleDetails?.description && <TextArea size="lg" surface="inline" value={cycleDetails.description} disabled />}
+      {cycleDetails?.description && (
+        <TextArea size="lg" surface="inline" autoResize maxRows={8} value={cycleDetails.description} disabled />
+      )}
 
       <div className="flex flex-col gap-5 pt-2.5 pb-6">
         <div className="flex items-center justify-start gap-1">
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index d975ba66d40..a6bb0eae298 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -139,10 +139,12 @@ export function CycleForm(props: Props) {
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Field name="description" invalid={Boolean(errors?.description)}>
-                  <TextAreaGroup>
+                  <TextAreaGroup resize="none">
                     <TextArea
                       size="lg"
                       surface="field"
+                      autoResize
+                      maxRows={8}
                       name="description"
                       placeholder={t("description")}
                       value={value}
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index db2cfe17611..ba3b709795f 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -147,10 +147,12 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
     <div className="flex flex-col gap-1.5">
       <div className={cn("relative", containerClassName)}>
         <Field name="title" invalid={title?.length === 0}>
-          <TextAreaGroup>
+          <TextAreaGroup resize="none">
             <TextArea
               size="2xl"
               surface="field"
+              autoResize
+              maxRows={4}
               id="title-input"
               disabled={disabled}
               value={title}
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 1ca08b76b44..c0826a823b8 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -238,7 +238,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
         </div>
 
         {moduleDetails.description && (
-          <TextArea size="lg" surface="inline" value={moduleDetails.description} disabled />
+          <TextArea size="lg" surface="inline" autoResize maxRows={8} value={moduleDetails.description} disabled />
         )}
 
         <div className="flex flex-col gap-5 pt-2.5 pb-6">
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 855409dc921..c799e56c03e 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -150,10 +150,12 @@ export function ModuleForm(props: Props) {
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Field name="description" invalid={Boolean(errors?.description)}>
-                  <TextAreaGroup>
+                  <TextAreaGroup resize="none">
                     <TextArea
                       size="lg"
                       surface="field"
+                      autoResize
+                      maxRows={8}
                       id="description"
                       name="description"
                       value={value}
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index fb22660979a..b35edd30c61 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -52,6 +52,8 @@ export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
           <TextArea
             size={fontSize === "small-font" ? "xl" : "2xl"}
             surface="inline"
+            autoResize
+            maxRows={4}
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 140e480793d..3149eba8524 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -93,10 +93,12 @@ export function StateForm(props: TStateForm) {
 
         {/* description */}
         <Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
-          <TextAreaGroup>
+          <TextAreaGroup resize="none">
             <TextArea
               size="lg"
               surface="field"
+              autoResize
+              maxRows={8}
               id="description"
               name="description"
               placeholder="Describe this state for your members."
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index adfcad527a1..3d22e4df0c3 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -140,10 +140,12 @@ function ProjectCommonAttributes(props: Props) {
           control={control}
           render={({ field: { value, onChange } }) => (
             <Field name="description" invalid={Boolean(errors?.description)}>
-              <TextAreaGroup>
+              <TextAreaGroup resize="none">
                 <TextArea
                   size="lg"
                   surface="field"
+                  autoResize
+                  maxRows={8}
                   id="description"
                   name="description"
                   value={value}
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index ed594165e55..e5aaab47bce 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -315,10 +315,12 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
             control={control}
             render={({ field: { value, onChange } }) => (
               <Field name="description" invalid={Boolean(errors?.description)} disabled={!isAdmin}>
-                <TextAreaGroup>
+                <TextAreaGroup resize="none">
                   <TextArea
                     size="lg"
                     surface="field"
+                    autoResize
+                    maxRows={8}
                     id="description"
                     name="description"
                     value={value}
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 0712fbaf11f..2f58541a351 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -191,10 +191,12 @@ export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Field name="description" invalid={Boolean(errors?.description)}>
-                  <TextAreaGroup>
+                  <TextAreaGroup resize="none">
                     <TextArea
                       size="lg"
                       surface="field"
+                      autoResize
+                      maxRows={8}
                       id="description"
                       name="description"
                       placeholder={t("common.description")}
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index 2f3444a4a30..1d896252972 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -116,10 +116,12 @@ export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Prop
               control={control}
               render={({ field: { value, onChange } }) => (
                 <Field name="description" invalid={Boolean(errors?.description)}>
-                  <TextAreaGroup>
+                  <TextAreaGroup resize="none">
                     <TextArea
                       size="lg"
                       surface="field"
+                      autoResize
+                      maxRows={8}
                       id="description"
                       name="description"
                       value={value}

From 706b6d82f05b0019602e7497f82faccef1ec4252 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 15:06:42 +0530
Subject: [PATCH 04/10] refactor: remove unnecessary containerClassName from
 TextArea components

Removed the redundant containerClassName="-ml-3" from TextArea components in InboxIssueMainContent, IssueMainContent, and PeekOverviewIssueDetails to streamline the code and improve consistency across the application.
---
 apps/web/core/components/inbox/content/issue-root.tsx          | 1 -
 apps/web/core/components/issues/issue-detail/main-content.tsx  | 1 -
 apps/web/core/components/issues/peek-overview/issue-detail.tsx | 1 -
 3 files changed, 3 deletions(-)

diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
index b741c8dcf8c..64e1e1a08e3 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -135,7 +135,6 @@ export const InboxIssueMainContent = observer(function InboxIssueMainContent(pro
           issueOperations={issueOperations}
           disabled={!isEditable}
           value={issue.name}
-          containerClassName="-ml-3"
         />
 
         {loader === "issue-loading" || issue.description_html === undefined ? (
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
index b4343835dd2..ac47acfa9c1 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -104,7 +104,6 @@ export const IssueMainContent = observer(function IssueMainContent(props: Props)
           issueOperations={issueOperations}
           disabled={isArchived || !isEditable}
           value={issue.name}
-          containerClassName="-ml-3"
         />
 
         <DescriptionInput
diff --git a/apps/web/core/components/issues/peek-overview/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
index 3ab8592ab83..c2fa31378bc 100644
--- a/apps/web/core/components/issues/peek-overview/issue-detail.tsx
+++ b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -103,7 +103,6 @@ export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetai
         issueOperations={issueOperations}
         disabled={disabled || isArchived}
         value={issue.name}
-        containerClassName="-ml-3"
       />
 
       <DescriptionInput

From eae4153d3bc8937a7f577dc179bb91df2823960a Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 15:18:40 +0530
Subject: [PATCH 05/10] refactor: remove maxRows from TextArea components in
 Cycle and Module analytics sidebars

Updated the TextArea components in CycleSidebarDetails and ModuleAnalyticsSidebar to remove the maxRows property, allowing for unrestricted text input. This change enhances the user experience by providing more flexibility in text entry.
---
 .../components/cycles/analytics-sidebar/sidebar-details.tsx     | 2 +-
 apps/web/core/components/modules/analytics-sidebar/root.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index a896096da2d..20e50eec64f 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -68,7 +68,7 @@ export const CycleSidebarDetails = observer(function CycleSidebarDetails(props:
   return (
     <div className="flex w-full flex-col gap-5">
       {cycleDetails?.description && (
-        <TextArea size="lg" surface="inline" autoResize maxRows={8} value={cycleDetails.description} disabled />
+        <TextArea size="lg" surface="inline" autoResize value={cycleDetails.description} disabled />
       )}
 
       <div className="flex flex-col gap-5 pt-2.5 pb-6">
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index c0826a823b8..5e007e552eb 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -238,7 +238,7 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
         </div>
 
         {moduleDetails.description && (
-          <TextArea size="lg" surface="inline" autoResize maxRows={8} value={moduleDetails.description} disabled />
+          <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
         )}
 
         <div className="flex flex-col gap-5 pt-2.5 pb-6">

From ddec0f397f703f28acff8768599090c4b19c76a0 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 15:25:27 +0530
Subject: [PATCH 06/10] refactor: remove className prop from IssueTitleInput
 component

Eliminated the optional className prop from the IssueTitleInputProps interface to streamline the component's API and improve consistency across the application.
---
 apps/web/core/components/issues/title-input.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index ba3b709795f..477ccb28f23 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -25,7 +25,6 @@ export type IssueTitleInputProps = {
   issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
-  className?: string;
   containerClassName?: string;
 };
 

From 5d978e1eee9aa684dee32afcf118e95487ef6d04 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 15:49:29 +0530
Subject: [PATCH 07/10] refactor: remove PageEditorTitle component to
 streamline editor functionality

Deleted the PageEditorTitle component from the editor, simplifying the codebase and enhancing maintainability. This change aligns with ongoing efforts to improve component structure and reduce redundancy in the application.
---
 .../core/components/pages/editor/title.tsx    | 92 -------------------
 1 file changed, 92 deletions(-)
 delete mode 100644 apps/web/core/components/pages/editor/title.tsx

diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
deleted file mode 100644
index b35edd30c61..00000000000
--- a/apps/web/core/components/pages/editor/title.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { TextArea } from "@makeplane/propel/components/text-area";
-// editor
-import type { EditorRefApi } from "@plane/editor";
-import { cn, getPageName } from "@plane/utils";
-// helpers
-// hooks
-import { usePageFilters } from "@/hooks/use-page-filters";
-
-type Props = {
-  editorRef: EditorRefApi | null;
-  readOnly: boolean;
-  title: string | undefined;
-  updateTitle: (title: string) => void;
-};
-
-export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
-  const { editorRef, readOnly, title, updateTitle } = props;
-  // states
-  const [isLengthVisible, setIsLengthVisible] = useState(false);
-  // page filters
-  const { fontSize } = usePageFilters();
-  // ui
-  const titleFontClassName = cn("font-bold tracking-[-2%]", {
-    "text-[1.6rem] leading-[1.9rem]": fontSize === "small-font",
-    "text-[2rem] leading-[2.375rem]": fontSize === "large-font",
-  });
-
-  return (
-    <div className="relative w-full shrink-0 py-3">
-      {readOnly ? (
-        <h6
-          className={cn(
-            titleFontClassName,
-            {
-              "text-placeholder": !title,
-            },
-            "wrap-break-word"
-          )}
-        >
-          {getPageName(title)}
-        </h6>
-      ) : (
-        <div className="relative">
-          <TextArea
-            size={fontSize === "small-font" ? "xl" : "2xl"}
-            surface="inline"
-            autoResize
-            maxRows={4}
-            placeholder="Untitled"
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                editorRef?.setFocusAtPosition(0);
-              }
-            }}
-            value={title}
-            onChange={(e) => updateTitle(e.target.value)}
-            maxLength={255}
-            onFocus={() => setIsLengthVisible(true)}
-            onBlur={() => setIsLengthVisible(false)}
-            autoFocus
-          />
-          <div
-            className={cn(
-              "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 font-regular text-secondary opacity-0 transition-opacity",
-              {
-                "opacity-100": isLengthVisible,
-              }
-            )}
-          >
-            <span
-              className={cn({
-                "text-danger-primary": title && title.length > 255,
-              })}
-            >
-              {title?.length}
-            </span>
-            /255
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});

From af26810d81c1b37f7c0a60f4fc4fa7aa61feb252 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 16:32:28 +0530
Subject: [PATCH 08/10] fix: ensure description field in StateForm defaults to
 an empty string

Updated the description field in the StateForm component to default to an empty string when no value is provided. This change improves the handling of form data and ensures consistent behavior in the input field.
---
 apps/web/core/components/project-states/create-update/form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
index 3149eba8524..4f4e6aac9b0 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -102,7 +102,7 @@ export function StateForm(props: TStateForm) {
               id="description"
               name="description"
               placeholder="Describe this state for your members."
-              value={formData?.description}
+              value={formData?.description ?? ""}
               onChange={(e) => handleFormData("description", e.target.value)}
             />
           </TextAreaGroup>

From 55e04833a5356bdb2d833632d440dcf48e13326b Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 17:02:19 +0530
Subject: [PATCH 09/10] refactor: simplify IssueTitleInput component by
 removing TextAreaGroup

Updated the IssueTitleInput component to eliminate the TextAreaGroup wrapper, replacing it with a div for improved structure. Additionally, adjusted the TextArea properties to set the surface to "inline" and changed the rows to 1, enhancing the input's appearance and functionality.
---
 apps/web/core/components/issues/title-input.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index 477ccb28f23..c48dfd7a274 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -7,7 +7,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { Field } from "@makeplane/propel/components/field";
-import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { TextArea } from "@makeplane/propel/components/text-area";
 import { useTranslation } from "@plane/i18n";
 import type { TNameDescriptionLoader } from "@plane/types";
 // types
@@ -146,12 +146,12 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
     <div className="flex flex-col gap-1.5">
       <div className={cn("relative", containerClassName)}>
         <Field name="title" invalid={title?.length === 0}>
-          <TextAreaGroup resize="none">
+          <div className="flex w-full">
             <TextArea
               size="2xl"
-              surface="field"
+              surface="inline"
               autoResize
-              maxRows={4}
+              rows={1}
               id="title-input"
               disabled={disabled}
               value={title}
@@ -161,7 +161,7 @@ export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTit
               onFocus={() => setIsLengthVisible(true)}
               onBlur={() => setIsLengthVisible(false)}
             />
-          </TextAreaGroup>
+          </div>
         </Field>
         <div
           className={cn(

From c2d40147d45c499e0eac58fa536a1adedcbb3dd9 Mon Sep 17 00:00:00 2001
From: Atul Tameshwari <atameshwari9@gmail.com>
Date: Thu, 3 Sep 2026 17:05:05 +0530
Subject: [PATCH 10/10] refactor: streamline description rendering in
 ModuleAnalyticsSidebar

Removed redundant wrapping of the description TextArea in the ModuleAnalyticsSidebar component, simplifying the code while maintaining functionality. This change enhances readability and consistency in the component's structure.
---
 .../web/core/components/modules/analytics-sidebar/root.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 5e007e552eb..ad8edb03a4d 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -235,12 +235,11 @@ export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(p
             />
           </div>
           <h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
+          {moduleDetails.description && (
+            <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
+          )}
         </div>
 
-        {moduleDetails.description && (
-          <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
-        )}
-
         <div className="flex flex-col gap-5 pt-2.5 pb-6">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">