From 2c24359a6e33b7e758cb6dfa9cc4ee40789ccf74 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 20 Mar 2024 16:36:32 +0530
Subject: [PATCH 1/2] chore: cycle modal description improvement

---
 web/components/cycles/form.tsx  | 2 +-
 web/components/modules/form.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 27b97204408..1063936f810 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -113,7 +113,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_description"
                     name="description"
                     placeholder="Description..."
-                    className="!h-24 w-full resize-none text-sm"
+                    className="w-full resize-none text-sm"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 2daa2da3b3f..6e34faf2137 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -128,7 +128,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   placeholder="Description..."
-                  className="h-24 w-full resize-none text-sm"
+                  className="w-full resize-none text-sm"
                   hasError={Boolean(errors?.description)}
                   tabIndex={2}
                 />

From faf94c92bbaf93c4d8bf1f186393ec2e1977e7de Mon Sep 17 00:00:00 2001
From: gurusainath <gurusainath007@gmail.com>
Date: Wed, 20 Mar 2024 20:24:29 +0530
Subject: [PATCH 2/2] chore: updated the description ui in cycles and modules

---
 web/components/cycles/form.tsx     |  2 +-
 web/components/cycles/sidebar.tsx  | 14 ++++++++------
 web/components/modules/form.tsx    |  2 +-
 web/components/modules/sidebar.tsx |  9 ++++++---
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 1063936f810..f8092f8d066 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -113,7 +113,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                     id="cycle_description"
                     name="description"
                     placeholder="Description..."
-                    className="w-full resize-none text-sm"
+                    className="w-full text-sm resize-none min-h-24"
                     hasError={Boolean(errors?.description)}
                     value={value}
                     onChange={onChange}
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index e142b95ec57..ed6fe4b7557 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -8,7 +8,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // icons
 import { ICycle } from "@plane/types";
 // ui
-import { Avatar, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { Avatar, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
 // components
 import { SidebarProgressStats } from "@/components/core";
 import ProgressChart from "@/components/core/sidebar/progress-chart";
@@ -219,8 +219,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         ? "0 Issue"
         : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
       : cycleDetails.total_issues === 0
-        ? "0 Issue"
-        : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+      ? "0 Issue"
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
@@ -290,9 +290,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         {cycleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
-            {cycleDetails.description}
-          </span>
+          <TextArea
+            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            value={cycleDetails.description}
+            disabled
+          />
         )}
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 6e34faf2137..30749218d1a 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -128,7 +128,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   placeholder="Description..."
-                  className="w-full resize-none text-sm"
+                  className="w-full text-sm resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   tabIndex={2}
                 />
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index c289ebc1e76..4ed37d3449f 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -25,6 +25,7 @@ import {
   UserGroupIcon,
   TOAST_TYPE,
   setToast,
+  TextArea,
 } from "@plane/ui";
 // components
 import { LinkModal, LinksList, SidebarProgressStats } from "@/components/core";
@@ -337,9 +338,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         </div>
 
         {moduleDetails.description && (
-          <span className="w-full whitespace-normal break-words py-2.5 text-sm leading-5 text-custom-text-200">
-            {moduleDetails.description}
-          </span>
+          <TextArea
+            className="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-sm leading-5 text-custom-text-200"
+            value={moduleDetails.description}
+            disabled
+          />
         )}
 
         <div className="flex items-center justify-start gap-1">