From f2a4e026a5f0b114cfa98be1bb70c910251e20fa Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
Date: Thu, 29 Jun 2023 18:19:38 +0530
Subject: [PATCH] fix: cycle and module sidebar overflow fix

---
 apps/app/components/cycles/sidebar.tsx  | 8 ++++++--
 apps/app/components/modules/sidebar.tsx | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index d61bd1943e..e4b48869f8 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -408,7 +408,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               <div className="flex w-full flex-col gap-6 px-6 py-6">
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2">
-                    <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
+                    <div className="max-w-[300px]">
+                      <h4 className="text-xl font-semibold text-brand-base break-words w-full">
+                        {cycle.name}
+                      </h4>
+                    </div>
                     <CustomMenu width="lg" ellipsis>
                       {!isCompleted && (
                         <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
@@ -427,7 +431,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
                     {cycle.description}
                   </span>
                 </div>
diff --git a/apps/app/components/modules/sidebar.tsx b/apps/app/components/modules/sidebar.tsx
index de87149689..4c7feacbde 100644
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@@ -322,7 +322,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               <div className="flex w-full flex-col gap-6 px-6 py-6">
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
-                    <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
+                    <div className="max-w-[300px]">
+                      <h4 className="text-xl font-semibold break-words w-full text-brand-base">
+                        {module.name}
+                      </h4>
+                    </div>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                         <span className="flex items-center justify-start gap-2">
@@ -339,7 +343,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
                     {module.description}
                   </span>
                 </div>