From 2063e7ebb5817de5e2cff5b8b887862fe89c0baa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lara=20Mi=C3=B1ones=20Rodr=C3=ADguez?=
 <lminones@ficodes.com>
Date: Wed, 26 Nov 2025 14:10:31 +0100
Subject: [PATCH] FIX break-words in every place for words smaller than 20
 chars if not then break-all

---
 .../pages/catalogs/catalogs.component.html    |  24 +++--
 src/app/pages/catalogs/catalogs.component.ts  |   8 ++
 .../billing-address.component.html            |   9 +-
 .../billing-address.component.ts              |   8 ++
 .../pages/checkout/checkout.component.html    |   5 +-
 src/app/pages/checkout/checkout.component.ts  |   8 ++
 .../contact-us/contact-us-form.component.html |   2 +-
 .../pages/dashboard/dashboard.component.html  |  12 ++-
 .../pages/dashboard/dashboard.component.ts    |   8 ++
 .../pages/dome-blog/dome-blog.component.html  |   6 +-
 .../pages/dome-blog/dome-blog.component.ts    |   8 ++
 .../organization-details.component.html       |  15 ++-
 .../organization-details.component.ts         |   8 ++
 .../product-details.component.html            | 100 ++++++++++++++----
 .../product-details.component.ts              |   8 ++
 .../inventory-products.component.html         |  57 +++++++---
 .../inventory-products.component.ts           |   8 ++
 .../product-inv-detail.component.html         |  25 ++++-
 .../product-inv-detail.component.ts           |   8 ++
 .../inventory-resources.component.html        |  10 +-
 .../inventory-resources.component.ts          |   8 ++
 .../inventory-services.component.html         |  10 +-
 .../inventory-services.component.ts           |   8 ++
 .../search-catalog.component.html             |   5 +-
 .../search-catalog.component.ts               |   8 ++
 .../create-catalog.component.html             |  10 +-
 .../create-catalog.component.ts               |   8 ++
 .../seller-catalogs.component.html            |   5 +-
 .../seller-catalogs.component.ts              |   8 ++
 .../update-catalog.component.html             |  10 +-
 .../update-catalog.component.ts               |   8 ++
 .../new-price-plan.component.html             |  25 ++++-
 .../new-price-plan.component.ts               |   8 ++
 .../seller-offer/seller-offer.component.html  |   5 +-
 .../seller-offer/seller-offer.component.ts    |   8 ++
 .../update-price-plan.component.html          |  25 ++++-
 .../update-price-plan.component.ts            |   8 ++
 .../create-product-spec.component.html        |  95 +++++++++++++----
 .../create-product-spec.component.ts          |   8 ++
 .../seller-product-spec.component.html        |   5 +-
 .../seller-product-spec.component.ts          |   8 ++
 .../update-product-spec.component.html        |  95 +++++++++++++----
 .../update-product-spec.component.ts          |   8 ++
 .../create-resource-spec.component.html       |  30 ++++--
 .../create-resource-spec.component.ts         |   8 ++
 .../seller-resource-spec.component.html       |   5 +-
 .../seller-resource-spec.component.ts         |   8 ++
 .../update-resource-spec.component.html       |  30 ++++--
 .../update-resource-spec.component.ts         |   8 ++
 .../create-service-spec.component.html        |  30 ++++--
 .../create-service-spec.component.ts          |   8 ++
 .../seller-service-spec.component.html        |   5 +-
 .../seller-service-spec.component.ts          |   8 ++
 .../update-service-spec.component.html        |  30 ++++--
 .../update-service-spec.component.ts          |   9 +-
 .../usage-list/usage-list.component.html      |   5 +-
 .../usage-list/usage-list.component.ts        |   8 ++
 .../billing-info/billing-info.component.html  |   5 +-
 .../billing-info/billing-info.component.ts    |   8 ++
 .../org-info/org-info.component.html          |   5 +-
 .../org-info/org-info.component.ts            |   8 ++
 src/app/shared/card/card.component.html       |  15 ++-
 .../shared/cart-card/cart-card.component.html |  25 ++++-
 .../shared/cart-card/cart-card.component.ts   |   8 ++
 .../cart-drawer/cart-drawer.component.html    |   6 +-
 .../cart-drawer/cart-drawer.component.ts      |   8 ++
 .../categories-filter.component.html          |   5 +-
 .../categories-filter.component.ts            |   8 ++
 .../categories-panel.component.html           |  10 +-
 .../categories-panel.component.ts             |  12 ++-
 .../category-item.component.html              |  10 +-
 .../category-item/category-item.component.ts  |   8 ++
 .../characteristic.component.html             |   5 +-
 .../characteristic.component.ts               |  11 +-
 .../markdown-textarea.component.html          |   5 +-
 .../markdown-textarea.component.ts            |   8 ++
 .../offer/catalogue/catalogue.component.html  |   5 +-
 .../offer/catalogue/catalogue.component.ts    |   8 ++
 .../offer-summary.component.html              |  45 ++++++--
 .../offer-summary/offer-summary.component.ts  |   8 +-
 .../usage-spec-metrics.component.html         |  10 +-
 .../usage-spec-metrics.component.ts           |   8 ++
 .../usage-spec-summary.component.html         |  20 +++-
 .../usage-spec-summary.component.ts           |   8 ++
 .../price-plan-drawer.component.html          |  17 ++-
 .../price-plan-drawer.component.ts            |   1 +
 86 files changed, 1030 insertions(+), 185 deletions(-)

diff --git a/src/app/pages/catalogs/catalogs.component.html b/src/app/pages/catalogs/catalogs.component.html
index 711cf968..37af1d5c 100644
--- a/src/app/pages/catalogs/catalogs.component.html
+++ b/src/app/pages/catalogs/catalogs.component.html
@@ -35,7 +35,10 @@ <h1 class="mb-2 text-center mt-4 text-4xl font-extrabold leading-none tracking-t
 
                 <div (click)="goToCatalogSearch(cat.id)" class="block cursor-pointer rounded-lg bg-cover mb-4 md:mb-0" style="background-image: url(assets/logos/dome-logo-element-colour.png);" >
                     <div class="block w-full h-full p-6 bg-opacity-100 bg-secondary-50 rounded-lg dark:bg-secondary-100 bg-secondary-50/90 dark:bg-secondary-100/90 bg-cover">
-                        <h5 class="text-2xl font-bold tracking-tight line-clamp-4 text-primary-100 dark:text-white text-wrap break-all">{{cat.name}}</h5>
+                        <h5 [ngClass]="{
+                          'break-all': hasLongWord(cat.name, 20),
+                          'break-words': !hasLongWord(cat.name, 20)
+                        }"  class="text-2xl font-bold tracking-tight line-clamp-4 text-primary-100 dark:text-white text-wrap break-words">{{cat.name}}</h5>
                         <markdown class="line-clamp-[8] text-wrap break-all dark:text-white text-gray-900" [data]="cat.description ? cat.description : 'CATALOGS._no_desc' | translate"></markdown>
                         <!--<a (click)="showFullDesc(cat);$event.stopPropagation();" class="text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md text-secondary-50 bg-primary-100 dark:bg-secondary-50 dark:text-primary-100 mb-2">
                           <fa-icon [icon]="faEye" class="text-primary-50 mr-2"></fa-icon>
@@ -44,9 +47,12 @@ <h5 class="text-2xl font-bold tracking-tight line-clamp-4 text-primary-100 dark:
                         <hr class="h-px my-1 bg-primary-100 border-0 dark:bg-primary-100">
                         <div class="">
                           @for(category of cat.category; track category.id) {
-                            <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold me-2 px-2.5 py-0.5 rounded-full w-fit text-wrap break-all">{{category.name}}</span>
+                            <span [ngClass]="{
+                              'break-all': hasLongWord(category.name, 20),
+                              'break-words': !hasLongWord(category.name, 20)
+                            }" class="inline-block bg-blue-300 text-primary-100 text-xs font-bold me-2 px-2.5 py-0.5 rounded-full w-fit text-wrap break-words">{{category.name}}</span>
                           } @empty {
-                            <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold me-2 px-2.5 py-0.5 rounded-full w-fit text-wrap break-all">{{'CATALOGS._no_cat' | translate}}</span>                            
+                            <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold me-2 px-2.5 py-0.5 rounded-full w-fit text-wrap break-words">{{'CATALOGS._no_cat' | translate}}</span>                            
                           }
                         </div>
                         <div class="flex sticky top-[100vh] justify-center align-items-bottom">
@@ -113,7 +119,10 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
    <!-- DESCRIPTION -->
    <div class="p-4">
      <div class="max-h-[300px] overflow-y-auto mb-4 p-4 rounded border border-primary-100/10 bg-primary-100/5 dark:bg-white/5">
-       <markdown class="dark:text-secondary-50 text-wrap break-all"
+       <markdown [ngClass]="{
+        'break-all': hasLongWord(showingCat.description, 20),
+        'break-words': !hasLongWord(showingCat.description, 20)
+        }" class="dark:text-secondary-50 text-wrap break-words"
                  [data]="showingCat.description ? showingCat.description : ('CATALOGS._no_desc' | translate)">
        </markdown>
      </div>
@@ -124,11 +133,14 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
    <!-- CATEGORIES -->
    <div class="p-4 flex flex-wrap gap-2">
      @for(category of showingCat.category; track category.id) {
-       <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold px-2.5 py-0.5 rounded-full text-wrap break-all">
+       <span [ngClass]="{
+        'break-all': hasLongWord(category.name, 20),
+        'break-words': !hasLongWord(category.name, 20)
+        }" class="inline-block bg-blue-300 text-primary-100 text-xs font-bold px-2.5 py-0.5 rounded-full text-wrap break-words">
          {{ category.name }}
        </span>
      } @empty {
-       <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold px-2.5 py-0.5 rounded-full text-wrap break-all">
+       <span class="inline-block bg-blue-300 text-primary-100 text-xs font-bold px-2.5 py-0.5 rounded-full text-wrap break-words">
          {{ 'CATALOGS._no_cat' | translate }}
        </span>
      }
diff --git a/src/app/pages/catalogs/catalogs.component.ts b/src/app/pages/catalogs/catalogs.component.ts
index 63c494bc..6defd054 100644
--- a/src/app/pages/catalogs/catalogs.component.ts
+++ b/src/app/pages/catalogs/catalogs.component.ts
@@ -99,4 +99,12 @@ export class CatalogsComponent implements OnInit{
     this.showingCat=cat;
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/checkout/billing-address/billing-address.component.html b/src/app/pages/checkout/billing-address/billing-address.component.html
index 84942423..420b4c92 100644
--- a/src/app/pages/checkout/billing-address/billing-address.component.html
+++ b/src/app/pages/checkout/billing-address/billing-address.component.html
@@ -1,7 +1,10 @@
 <div role="radio" aria-checked="true" tabindex="0">
   <div class="group relative cursor-pointer rounded border p-4 hover:border-primary-50 border-primary-100 shadow-sm " [ngClass]="data.selected ? 'bg-primary-50/50 dark:bg-primary-100' : 'bg-gray-100 dark:bg-secondary-300'" (click)="selectBillingAddress($event)">
-    <p class="mb-3 text-sm font-semibold capitalize text-heading dark:text-white line-clamp-4 text-wrap break-all">{{ data.name }}</p>
-    <p class="text-sm text-sub-heading dark:text-gray-200 line-clamp-8 text-wrap break-all">{{ data.postalAddress.street }}, {{ data.postalAddress.postCode }}, {{ data.postalAddress.city}}, {{ data.postalAddress.stateOrProvince }}, {{ data.postalAddress.country }}</p>
+    <p [ngClass]="{
+      'break-all': hasLongWord(data.name, 20),
+      'break-words': !hasLongWord(data.name, 20)
+      }" class="mb-3 text-sm font-semibold capitalize text-heading dark:text-white line-clamp-4 text-wrap break-words">{{ data.name }}</p>
+    <p class="text-sm text-sub-heading dark:text-gray-200 line-clamp-8 text-wrap break-words">{{ data.postalAddress.street }}, {{ data.postalAddress.postCode }}, {{ data.postalAddress.city}}, {{ data.postalAddress.stateOrProvince }}, {{ data.postalAddress.country }}</p>
     <div
       class="absolute top-4 flex space-x-2 opacity-0 group-hover:opacity-100 right-4">
       <button (click)="editBill=true;$event.stopPropagation();" class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-50 dark:text-white"><span
@@ -79,7 +82,7 @@ <h2 class="text-xl md:text-2xl lg:text-3xl font-bold text-primary-100 dark:text-
                 </svg>                
                 
                 <p class="mb-4 text-gray-500 dark:text-white">{{ 'BILLING._confirm_delete' | translate }}</p>
-                <p class="mb-4 text-gray-500 dark:text-white text-wrap break-all"><b>{{data.name}}</b>: {{data.postalAddress.street}}, {{data.postalAddress.city}}, {{data.postalAddress.country}}.</p>
+                <p class="mb-4 text-gray-500 dark:text-white text-wrap break-words"><b>{{data.name}}</b>: {{data.postalAddress.street}}, {{data.postalAddress.city}}, {{data.postalAddress.country}}.</p>
                 <div class="flex justify-center items-center space-x-4">
                     <button (click)="deleteBill=false;$event.stopPropagation();" type="button" class="py-2 px-3 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 rounded-lg border border-gray-200 dark:border-secondary-300 hover:bg-gray-100 dark:hover:bg-secondary-200 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10">
                         {{ 'BILLING._cancel' | translate }}
diff --git a/src/app/pages/checkout/billing-address/billing-address.component.ts b/src/app/pages/checkout/billing-address/billing-address.component.ts
index b0fe0d12..1660f8f3 100644
--- a/src/app/pages/checkout/billing-address/billing-address.component.ts
+++ b/src/app/pages/checkout/billing-address/billing-address.component.ts
@@ -76,4 +76,12 @@ export class BillingAddressComponent {
     });*/
     this.deleteBill=false;
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/checkout/checkout.component.html b/src/app/pages/checkout/checkout.component.html
index 43617b05..32847b6b 100644
--- a/src/app/pages/checkout/checkout.component.html
+++ b/src/app/pages/checkout/checkout.component.html
@@ -125,7 +125,10 @@ <h1 class="mb-4 pb-2 mt-4 text-4xl font-extrabold leading-none tracking-tight te
                       }
                    </button>
                    <div class="p-2 flex items-center w-2/3">
-                      <p class="text-lg text-gray-700 dark:text-gray-200 line-clamp-4 text-wrap break-all">{{item.name}}</p>
+                      <p [ngClass]="{
+                        'break-all': hasLongWord(item.name, 20),
+                        'break-words': !hasLongWord(item.name, 20)
+                        }" class="text-lg text-gray-700 dark:text-gray-200 line-clamp-4 text-wrap break-words">{{item.name}}</p>
                    </div> 
                   </div>              
                  <div class="p-2 flex items-center">
diff --git a/src/app/pages/checkout/checkout.component.ts b/src/app/pages/checkout/checkout.component.ts
index e2949453..cb112fa0 100644
--- a/src/app/pages/checkout/checkout.component.ts
+++ b/src/app/pages/checkout/checkout.component.ts
@@ -614,4 +614,12 @@ export class CheckoutComponent implements OnInit {
   goToProdDetails(product: cartProduct){
     this.router.navigate(['/search/', product.id]);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/contact-us/contact-us-form.component.html b/src/app/pages/contact-us/contact-us-form.component.html
index ed2255c5..b8b93d6e 100644
--- a/src/app/pages/contact-us/contact-us-form.component.html
+++ b/src/app/pages/contact-us/contact-us-form.component.html
@@ -141,7 +141,7 @@ <h2 class="text-left text-2xl mb-2 font-bold dark:text-white">{{ 'CONTACTUS._fil
                 <div class="w-full mb-4 rounded-t-lg p-8">
                     
                     <fa-icon [icon]="faHandsHoldingHeart" class="text-5xl text-primary-50 align-middle mr-2"></fa-icon>
-                    <h5 class="md:text-3xl lg:text-4xl mt-2 font-semibold tracking-tight text-secondary-100 dark:text-white text-wrap break-all">{{ 'CONTACTUS._thanks' | translate }}</h5>
+                    <h5 class="md:text-3xl lg:text-4xl mt-2 font-semibold tracking-tight text-secondary-100 dark:text-white text-wrap break-words">{{ 'CONTACTUS._thanks' | translate }}</h5>
     
                 </div>
         </div>
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index b7a6d5a8..e4f9bec6 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -27,7 +27,11 @@ <h1 class="mb-4 text-left text-4xl font-extrabold tracking-tight md:text-5xl lg:
                        [style.display]="'-webkit-box'"
                        [style.webkitBoxOrient]="'vertical'"
                        [style.webkitLineClamp]="'2'"
-                       class="text-md text-wrap break-all line-clamp-2 mb-2 font-medium block items-center
+                       [ngClass]="{
+                        'break-all': hasLongWord(serv, 20),
+                        'break-words': !hasLongWord(serv, 20)
+                        }"
+                       class="text-md text-wrap break-words line-clamp-2 mb-2 font-medium block items-center
                               px-2.5 py-0.5 rounded-md text-primary-100 bg-secondary-50 w-fit animate-in">
                       {{ serv }}
                     </a>
@@ -41,7 +45,11 @@ <h1 class="mb-4 text-left text-4xl font-extrabold tracking-tight md:text-5xl lg:
                     [style.display]="'-webkit-box'"
                     [style.webkitBoxOrient]="'vertical'"
                     [style.webkitLineClamp]="'2'"
-                       class="text-md text-wrap break-all line-clamp-2 font-medium block items-center
+                    [ngClass]="{
+                      'break-all': hasLongWord(pub, 20),
+                      'break-words': !hasLongWord(pub, 20)
+                      }"
+                       class="text-md text-wrap break-words line-clamp-2 font-medium block items-center
                               px-2.5 py-0.5 rounded-md text-primary-100 bg-secondary-50 w-fit animate-in">
                       {{ pub }}
                     </a>
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index d89bd139..7eaeaaa4 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -158,4 +158,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.router.navigate([path]);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/dome-blog/dome-blog.component.html b/src/app/pages/dome-blog/dome-blog.component.html
index 27ec0c26..195e9041 100644
--- a/src/app/pages/dome-blog/dome-blog.component.html
+++ b/src/app/pages/dome-blog/dome-blog.component.html
@@ -46,7 +46,11 @@ <h4 class="mb-4 text-lg italic text-secondary-200 dark:text-secondary-50">
                     <b class="text-secondary-100 dark:text-primary-50">{{entry.author}}</b> 
                     on {{entry.date | date:'EEEE, dd/MM/yy, HH:mm'}}.
                 </h4>
-                <markdown class="dark:text-secondary-50 line-clamp-4 text-wrap break-all"
+                <markdown                     
+                [ngClass]="{
+                    'break-all': hasLongWord(entry.content, 20),
+                    'break-words': !hasLongWord(entry.content, 20)
+                    }" class="dark:text-secondary-50 line-clamp-4 text-wrap break-words"
                 [data]="entry.content">
                 </markdown>
                 <button type="button" (click)="goToDetails(entry._id)" 
diff --git a/src/app/pages/dome-blog/dome-blog.component.ts b/src/app/pages/dome-blog/dome-blog.component.ts
index cca87431..01e95c59 100644
--- a/src/app/pages/dome-blog/dome-blog.component.ts
+++ b/src/app/pages/dome-blog/dome-blog.component.ts
@@ -70,4 +70,12 @@ export class DomeBlogComponent implements OnInit {
   goToUpdate(id:any){
     this.router.navigate(['/blog-entry/', id]);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/organization-details/organization-details.component.html b/src/app/pages/organization-details/organization-details.component.html
index 989a73c0..0e4a2833 100644
--- a/src/app/pages/organization-details/organization-details.component.html
+++ b/src/app/pages/organization-details/organization-details.component.html
@@ -31,11 +31,17 @@
         <div class="grid grid-rows-auto p-4 md:p-8 h-fit">
             <div class="mt-2 h-fit">
                 <!--<a href="#">-->
-                <h5 class="text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-white line-clamp-3 text-wrap break-all">{{orgInfo?.tradingName}}</h5>
+                <h5 [ngClass]="{
+                    'break-all': hasLongWord(orgInfo?.tradingName, 20),
+                    'break-words': !hasLongWord(orgInfo?.tradingName, 20)
+                    }" class="text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-white line-clamp-3 text-wrap break-words">{{orgInfo?.tradingName}}</h5>
                 <!--</a>-->
             </div>
             <div class="pt-2 line-clamp-5 h-fit">
-                <a href="{{website}}" target="_blank" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline line-clamp-2 text-wrap break-all">{{website}}</a>
+                <a href="{{website}}" target="_blank" [ngClass]="{
+                    'break-all': hasLongWord(website, 20),
+                    'break-words': !hasLongWord(website, 20)
+                    }" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline line-clamp-2 text-wrap break-words">{{website}}</a>
             </div>
         </div>
         <div class="hidden lg:block overflow-hidden rounded-r-lg">
@@ -50,7 +56,10 @@ <h5 class="text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 da
     <div class="w-full h-full bg-secondary-50 rounded-lg p-4 dark:bg-secondary-100 dark:border-gray-800 border-secondary-50 border-b">
         <div id="desc-container" class="w-full bg-secondary-50/95 dark:bg-secondary-100/95 rounded-lg p-4 lg:p-12">
             <h2 class="text-2xl lg:text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-4">{{ 'ORGANIZATION._details' | translate }}</h2>
-            <markdown class="dark:text-gray-200 text-wrap break-all" [data]="description"></markdown>
+            <markdown [ngClass]="{
+                'break-all': hasLongWord(description, 20),
+                'break-words': !hasLongWord(description, 20)
+                }" class="dark:text-gray-200 text-wrap break-words" [data]="description"></markdown>
             <h2 class="text-2xl lg:text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-4">{{ 'PROFILE._contact_info' | translate }}</h2>
             <div class="m-4 relative overflow-x-auto shadow-md sm:rounded-lg bg-gray-200 dark:bg-secondary-300">
                 <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200 border dark:border-gray-700 border-gray-300">
diff --git a/src/app/pages/organization-details/organization-details.component.ts b/src/app/pages/organization-details/organization-details.component.ts
index 962b2235..442f53c3 100644
--- a/src/app/pages/organization-details/organization-details.component.ts
+++ b/src/app/pages/organization-details/organization-details.component.ts
@@ -60,4 +60,12 @@ export class OrganizationDetailsComponent implements OnInit {
     this.location.back();
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/product-details/product-details.component.html b/src/app/pages/product-details/product-details.component.html
index b44d7b68..de748cb4 100644
--- a/src/app/pages/product-details/product-details.component.html
+++ b/src/app/pages/product-details/product-details.component.html
@@ -33,11 +33,17 @@
         <div class="grid grid-rows-auto p-4 md:p-8 h-fit">
             <div class="mt-2 h-fit">
                 <!--<a href="#">-->
-                <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-white text-wrap break-all">{{productOff?.name}}</h5>
+                <h5 [ngClass]="{
+                    'break-all': hasLongWord(productOff?.name, 20),
+                    'break-words': !hasLongWord(productOff?.name, 20)
+                  }" class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-white text-wrap break-words">{{productOff?.name}}</h5>
                 <!--</a>-->
             </div>
             <div class="pt-2 line-clamp-5 h-fit">
-                <markdown class="dark:text-gray-200 text-wrap break-all" [data]="productOff?.description"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(productOff?.description, 20),
+                    'break-words': !hasLongWord(productOff?.description, 20)
+                  }" class="dark:text-gray-200 text-wrap break-words" [data]="productOff?.description"></markdown>
             </div>
             <div class="flex flex-row justify-between h-fit">
                 @if(orgInfo!=undefined){
@@ -194,12 +200,19 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
             <div #detailsScrollAnchor id="details-scroll-anchor" class="pt-[88px] -mt-[88px]"></div>
             <div id="details-container">
                 <h2 #detailsContent class="text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-4">Description</h2>
-                <markdown class="dark:text-gray-200 text-wrap break-all" [data]="prodSpec.description"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(prodSpec.description, 20),
+                    'break-words': !hasLongWord(prodSpec.description, 20)
+                    }" class="dark:text-gray-200 text-wrap break-words" [data]="prodSpec.description"></markdown>
                 @if(serviceSpecs.length > 0){
                     <div class="pb-2">
                         <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._service_spec' | translate }}:</h5>
                         @for(service of serviceSpecs; track service.id){
-                            <p class="pl-4 dark:text-gray-200"><b>{{service.name}}</b>:  <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-all" [data]="service.description"></markdown></p>
+                            <p [ngClass]="{
+                                'break-all': hasLongWord(service.description, 20),
+                                'break-words': !hasLongWord(service.description, 20)
+                                }"
+                             class="pl-4 dark:text-gray-200"><b>{{service.name}}</b>:  <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-words" [data]="service.description"></markdown></p>
                         }
                     </div>
                 }
@@ -207,7 +220,11 @@ <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-prima
                     <div class="pb-2">
                         <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._resource_spec' | translate }}:</h5>
                         @for(resource of resourceSpecs; track resource.id){
-                            <p class="pl-4 dark:text-gray-200"><b>{{resource.name}}</b>: <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-all" [data]="resource.description"></markdown></p>
+                            <p class="pl-4 dark:text-gray-200"><b>{{resource.name}}</b>: <markdown [ngClass]="{
+                                'break-all': hasLongWord(resource.description, 20),
+                                'break-words': !hasLongWord(resource.description, 20)
+                                }"
+                                class="text-gray-800 dark:text-gray-200 text-wrap break-words" [data]="resource.description"></markdown></p>
                         }
                     </div>
                 }
@@ -300,9 +317,16 @@ <h2 class="text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-ce
                             @if (price.priceType == 'custom') {
                                 <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full p-4">
                                     <div class="flex justify-start mb-2">
-                                        <h2 class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2 break-all">{{price.name}}</h2>
+                                        <h2 [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }"
+                                        class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2 break-words">{{price.name}}</h2>
                                     </div>
-                                    <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                    <markdown [ngClass]="{
+                                        'break-all': hasLongWord(price?.description, 20),
+                                        'break-words': !hasLongWord(price?.description, 20)
+                                        }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                 </div>
                             }
                         }
@@ -322,29 +346,48 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
                         @for (price of productOff?.productOfferingPrice; track price.id) {
                             @if (price.priceType == 'recurring') {
                                 <div class="mx-auto bg-white dark:bg-secondary-200 dark:border-gray-800 border border-gray-200 rounded-lg shadow w-full">
-                                    <div class="bg-green-500 rounded-t-lg w-full text-wrap break-all">
-                                        <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 w-full break-all">{{price.name}}</h5>
+                                    <div class="bg-green-500 rounded-t-lg w-full text-wrap">
+                                        <h5 [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }"
+                                         class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 w-full break-words">{{price.name}}</h5>
                                     </div>
                                     <div class="pl-4 pr-4">
-                                        <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                        <markdown [ngClass]="{
+                                            'break-all': hasLongWord(price?.description, 20),
+                                            'break-words': !hasLongWord(price?.description, 20)
+                                            }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                     </div>
                                 </div>
                             } @else if (price.priceType == 'usage') {
                                 <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full">
                                     <div class="bg-yellow-300 rounded-t-lg w-full">
-                                        <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-all">{{price.name}}</h5>
+                                        <h5 [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }" class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-words">{{price.name}}</h5>
                                     </div>
                                     <div class="pl-4 pr-4">
-                                        <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                        <markdown [ngClass]="{
+                                            'break-all': hasLongWord(price?.description, 20),
+                                            'break-words': !hasLongWord(price?.description, 20)
+                                            }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                     </div>
                                 </div>
                             } @else {
                                 <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full">
                                     <div class="bg-blue-500 rounded-t-lg w-full">
-                                        <h5 class="flex justify-center mb-4 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-all">{{price.name}}</h5>
+                                        <h5 [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }" class="flex justify-center mb-4 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-words">{{price.name}}</h5>
                                     </div>
                                     <div class="pl-4 pr-4">
-                                        <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                        <markdown [ngClass]="{
+                                            'break-all': hasLongWord(price?.description, 20),
+                                            'break-words': !hasLongWord(price?.description, 20)
+                                            }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                     </div>
                                 </div>
                             }
@@ -372,24 +415,27 @@ <h2 class="text-4xl font-extrabold text-primary-100 text-center pb-8 pt-12 dark:
                         @for (char of prodChars; track char.id; let idx = $index) {
                             <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                                 <div class="border border-gray-200 rounded-lg shadow bg-white dark:bg-secondary-200 dark:border-gray-800 shadow-md p-8 h-full">
-                                    <h3 class="text-2xl font-bold mb-4 dark:text-white break-all">{{char.name}}</h3>
+                                    <h3 [ngClass]="{
+                                        'break-all': hasLongWord(char.name, 20),
+                                        'break-words': !hasLongWord(char.name, 20)
+                                        }" class="text-2xl font-bold mb-4 dark:text-white break-words">{{char.name}}</h3>
                                     @for (val of char?.productSpecCharacteristicValue; track val.value) {
                                         @if (val?.isDefault == true) {
                                             <div class="flex items-center pl-4">
                                                 <input disabled checked id="disabled-checked-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-600 dark:border-gray-800 rounded-full focus:ring-blue-500 focus:ring-2">
                                                 @if(val.value){
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-all">{{val.value}} ({{val.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.value}} ({{val.unitOfMeasure}})</label>
                                                 } @else {
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-all">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 dark:bg-secondary-200 dark:border-gray-800 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
                                                 }
                                             </div>
                                         } @else {
                                             <div class="flex items-center pl-4">
                                                 <input disabled id="disabled-checkbox" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-600 dark:border-gray-800 border-gray-300 rounded-full focus:ring-blue-500 focus:ring-2">
                                                 @if(val.value){
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-all">{{val.value}} ({{val.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.value}} ({{val.unitOfMeasure}})</label>
                                                 } @else {
-                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-all">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
+                                                    <label for="disabled-checked-checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-200 text-wrap break-words">{{val.valueFrom}} - {{val.valueTo}} ({{val?.unitOfMeasure}})</label>
                                                 }
                                             </div>
                                         }
@@ -424,7 +470,10 @@ <h2 #attachContent class="text-4xl font-extrabold text-primary-100 dark:text-pri
                     <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                         <div class="border border-gray-200 rounded-lg shadow bg-white dark:bg-secondary-200 dark:border-gray-800 shadow-md p-8 h-full grid grid-cols-80/20 pb-4 h-1/4">
                             <div class="flex justify-start">
-                                <h3 class="text-2xl font-bold mb-4 dark:text-white break-all">{{att.name}}</h3>
+                                <h3 [ngClass]="{
+                                    'break-all': hasLongWord(att.name, 20),
+                                    'break-words': !hasLongWord(att.name, 20)
+                                    }" class="text-2xl font-bold mb-4 dark:text-white break-words">{{att.name}}</h3>
                             </div>
                             <!--<a class="mb-2 font-normal pl-4 text-primary-100 text-wrap break-all" target="_blank" href="{{att.url}}">
                                 {{att.url}}
@@ -470,8 +519,12 @@ <h2 class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2 text-wrap
                             <!-- Apply line-clamp to this div, not markdown -->
                             <div #termsText [class.line-clamp-5]="!showTermsMore" class="overflow-hidden">
                                 <markdown
+                                [ngClass]="{
+                                    'break-all': hasLongWord(licenseTerm?.description, 20),
+                                    'break-words': !hasLongWord(licenseTerm?.description, 20)
+                                    }"
                                 [data]="licenseTerm?.description"
-                                class="text-lg font-normal text-gray-700 dark:text-gray-200 mb-4 break-all">
+                                class="text-lg font-normal text-gray-700 dark:text-gray-200 mb-4 break-words">
                                 </markdown>
                             </div>                            
                             
@@ -501,7 +554,10 @@ <h2 #relationshipsContent class="text-4xl font-extrabold text-primary-100 text-c
                     @for (rel of prodSpec.productSpecificationRelationship; track rel.id) {
                         <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
                             <div class="border border-gray-200 rounded-lg shadow bg-white dark:bg-secondary-200 dark:border-gray-800 shadow-md p-8 h-full">
-                                <h3 class="text-2xl font-bold mb-4 dark:text-white break-all">{{rel.name}}</h3>
+                                <h3 [ngClass]="{
+                                    'break-all': hasLongWord(rel.name, 20),
+                                    'break-words': !hasLongWord(rel.name, 20)
+                                    }" class="text-2xl font-bold mb-4 dark:text-white break-words">{{rel.name}}</h3>
                                 <div class="flex justify-between">
                                     <p class="mb-2 font-normal pl-4 text-gray-700 dark:text-gray-200">{{rel.relationshipType}}</p>
                                     @if(rel.relationshipType == 'dependency'){
diff --git a/src/app/pages/product-details/product-details.component.ts b/src/app/pages/product-details/product-details.component.ts
index 2eec1846..a4248acd 100644
--- a/src/app/pages/product-details/product-details.component.ts
+++ b/src/app/pages/product-details/product-details.component.ts
@@ -838,4 +838,12 @@ async deleteProduct(product: Product | undefined){
     this.isDrawerOpen = false;
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
index 7f148753..e629eacd 100644
--- a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
+++ b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
@@ -255,7 +255,10 @@ <h5 class="text-2xl md:text-3xl lg:text-4xl font-semibold tracking-tight text-pr
 
                     <div id="details-container">            
                         <h2 #detailsContent class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-4">{{ 'PRODUCT_INVENTORY._description' | translate }}</h2>
-                        <markdown class="dark:text-gray-200 text-wrap break-all" [data]="selectedProduct.product?.description"></markdown>
+                        <markdown [ngClass]="{
+                            'break-all': hasLongWord(selectedProduct.product?.description, 20),
+                            'break-words': !hasLongWord(selectedProduct.product?.description, 20)
+                            }" class="dark:text-gray-200 text-wrap break-words" [data]="selectedProduct.product?.description"></markdown>
         
                     <h2 class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-8 pt-12">{{ 'PRODUCT_INVENTORY._pricing' | translate }}</h2>
                     @if(productOff?.productOfferingPrice != undefined){
@@ -265,9 +268,15 @@ <h2 class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-primary-100 dark
                                     @if (price.priceType == 'custom') {
                                         <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full p-4">
                                             <div class="flex justify-start mb-2">
-                                                <h2 class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2 break-all">{{price.name}}</h2>
+                                                <h2 [ngClass]="{
+                                                    'break-all': hasLongWord(price.name, 20),
+                                                    'break-words': !hasLongWord(price.name, 20)
+                                                    }" class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2 break-words">{{price.name}}</h2>
                                             </div>
-                                            <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                            <markdown [ngClass]="{
+                                                'break-all': hasLongWord(price?.description, 20),
+                                                'break-words': !hasLongWord(price?.description, 20)
+                                                }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                         </div>
                                     }
                                 }
@@ -287,29 +296,47 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
                                 @for (price of productOff?.productOfferingPrice; track price.id) {
                                     @if (price.priceType == 'recurring') {
                                         <div class="mx-auto bg-white dark:bg-secondary-200 dark:border-gray-800 border border-gray-200 rounded-lg shadow w-full">
-                                            <div class="bg-green-500 rounded-t-lg w-full text-wrap break-all">
-                                                <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 w-full break-all">{{price.name}}</h5>
+                                            <div class="bg-green-500 rounded-t-lg w-full text-wrap">
+                                                <h5 [ngClass]="{
+                                                    'break-all': hasLongWord(price.name, 20),
+                                                    'break-words': !hasLongWord(price.name, 20)
+                                                    }" class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 w-full break-words">{{price.name}}</h5>
                                             </div>
                                             <div class="pl-4 pr-4">
-                                                <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                                <markdown [ngClass]="{
+                                                    'break-all': hasLongWord(price?.description, 20),
+                                                    'break-words': !hasLongWord(price?.description, 20)
+                                                    }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                             </div>
                                         </div>
                                     } @else if (price.priceType == 'usage') {
                                         <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full">
                                             <div class="bg-yellow-300 rounded-t-lg w-full">
-                                                <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-all">{{price.name}}</h5>
+                                                <h5 [ngClass]="{
+                                                    'break-all': hasLongWord(price.name, 20),
+                                                    'break-words': !hasLongWord(price.name, 20)
+                                                    }" class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-words">{{price.name}}</h5>
                                             </div>
                                             <div class="pl-4 pr-4">
-                                                <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                                <markdown [ngClass]="{
+                                                    'break-all': hasLongWord(price?.description, 20),
+                                                    'break-words': !hasLongWord(price?.description, 20)
+                                                    }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                             </div>
                                         </div>
                                     } @else {
                                         <div class="mx-auto bg-white border border-gray-200 dark:bg-secondary-200 dark:border-gray-800 rounded-lg shadow w-full">
                                             <div class="bg-blue-500 rounded-t-lg w-full">
-                                                <h5 class="flex justify-center mb-4 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-all">{{price.name}}</h5>
+                                                <h5 [ngClass]="{
+                                                    'break-all': hasLongWord(price.name, 20),
+                                                    'break-words': !hasLongWord(price.name, 20)
+                                                    }" class="flex justify-center mb-4 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-words">{{price.name}}</h5>
                                             </div>
                                             <div class="pl-4 pr-4">
-                                                <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                                <markdown [ngClass]="{
+                                                    'break-all': hasLongWord(price?.description, 20),
+                                                    'break-words': !hasLongWord(price?.description, 20)
+                                                    }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                             </div>
                                         </div>
                                     }
@@ -351,7 +378,10 @@ <h2 class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-primary-100 dark
                                             <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
                                                 <a (click)="selectService(serv.id)" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{serv.id}}</a>                                  
                                             </td>
-                                            <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(serv.name, 20),
+                                                'break-words': !hasLongWord(serv.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words w-1/2 md:w-1/4">
                                                 {{serv.name}}
                                             </td>
                                             <td class="hidden md:table-cell px-6 py-4 md:w-1/4">
@@ -400,7 +430,10 @@ <h2 class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-primary-100 dark
                                             <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
                                                 <a (click)="selectResource(res.id)" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{res.id}}</a>                               
                                             </td>
-                                            <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(res.name, 20),
+                                                'break-words': !hasLongWord(res.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words w-1/2 md:w-1/4">
                                                 {{res.name}}
                                             </td>
                                             <td class="hidden md:table-cell px-6 py-4 md:w-1/4">
diff --git a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
index bbe5f6a8..c9422627 100644
--- a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
+++ b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.ts
@@ -306,4 +306,12 @@ export class InventoryProductsComponent implements OnInit {
     this.eventMessage.emitOpenResourceDetails({resourceId: id, prodId: this.selectedProduct.id});
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.html b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.html
index 96d27c29..6ecb9aae 100644
--- a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.html
+++ b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.html
@@ -36,7 +36,10 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
                 <!--</a>-->
             </div>
             <div class="pt-2 line-clamp-5 h-fit">
-                <markdown class="dark:text-gray-200 text-wrap break-all" [data]="productOff?.description"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(productOff?.description, 20),
+                    'break-words': !hasLongWord(productOff?.description, 20)
+                    }" class="dark:text-gray-200 text-wrap break-words" [data]="productOff?.description"></markdown>
             </div>
             <div class="pt-2 line-clamp-5 h-fit">
                 Start Date: {{ prod.startDate }}
@@ -59,12 +62,18 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
 
             <div id="details-container">            
                 <h2 #detailsContent class="text-4xl font-extrabold text-primary-100 dark:text-primary-50 text-center pb-4">Description</h2>
-                <markdown class="dark:text-gray-200 text-wrap break-all" [data]="prodSpec.description"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(prodSpec.description, 20),
+                    'break-words': !hasLongWord(prodSpec.description, 20)
+                    }" class="dark:text-gray-200 text-wrap break-words" [data]="prodSpec.description"></markdown>
                 @if(serviceSpecs.length > 0){
                     <div class="pb-2">                
                         <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._service_spec' | translate }}:</h5>
                         @for(service of serviceSpecs; track service.id){
-                            <p class="pl-4 dark:text-gray-200"><b>{{service.name}}</b>:  <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-all" [data]="service.description"></markdown></p>
+                            <p class="pl-4 dark:text-gray-200"><b>{{service.name}}</b>:  <markdown [ngClass]="{
+                                'break-all': hasLongWord(service.description, 20),
+                                'break-words': !hasLongWord(service.description, 20)
+                                }" class="text-gray-800 dark:text-gray-200 text-wrap break-words" [data]="service.description"></markdown></p>
                         }
                     </div>
                 }
@@ -72,7 +81,10 @@ <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-prima
                     <div class="pb-2">                
                         <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._resource_spec' | translate }}:</h5>
                         @for(resource of resourceSpecs; track resource.id){
-                            <p class="pl-4 dark:text-gray-200"><b>{{resource.name}}</b>: <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-all" [data]="resource.description"></markdown></p>
+                            <p class="pl-4 dark:text-gray-200"><b>{{resource.name}}</b>: <markdown [ngClass]="{
+                                'break-all': hasLongWord(resource.description, 20),
+                                'break-words': !hasLongWord(resource.description, 20)
+                                }" class="text-gray-800 dark:text-gray-200 text-wrap break-words" [data]="resource.description"></markdown></p>
                         }
                     </div>
                 }
@@ -94,7 +106,10 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
                             <div class="flex justify-start mb-2">
                                 <h2 class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2">{{pricePlan?.name}}</h2>
                             </div>
-                            <markdown class="dark:text-gray-200 w-full p-4 text-wrap break-all" [data]="pricePlan?.description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(pricePlan?.description, 20),
+                                'break-words': !hasLongWord(pricePlan?.description, 20)
+                                }" class="dark:text-gray-200 w-full p-4 text-wrap break-words" [data]="pricePlan?.description"></markdown>
                         </div>
                     }
                 </div>
diff --git a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
index b249f6fd..924aacb9 100644
--- a/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
+++ b/src/app/pages/product-inventory/inventory-items/product-inv-detail/product-inv-detail.component.ts
@@ -171,4 +171,12 @@ export class ProductInvDetailComponent implements OnInit {
     return this.images.length > 0 ? this.images?.at(0)?.url : 'https://placehold.co/600x400/svg';
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
index cd09c6d8..4a853790 100644
--- a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
+++ b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.html
@@ -150,7 +150,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                                     <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
                                         <a (click)="selectResource(res)" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{res.id}}</a>                                    
                                     </td>
-                                    <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
+                                    <td [ngClass]="{
+                                        'break-all': hasLongWord(res.name, 20),
+                                        'break-words': !hasLongWord(res.name, 20)
+                                        }" class="px-6 py-4 text-wrap break-words w-1/2 md:w-1/4">
                                         {{res.name}}
                                     </td>
                                     <td class="hidden md:table-cell px-6 py-4 md:w-1/4">
@@ -226,7 +229,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             </div>
             <div class="p-4">
                 <h2 class="text-2xl font-extrabold text-primary-100 text-center dark:text-primary-50 pb-4">{{selectedRes.name}}</h2>
-                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900 pb-4 text-center" [data]="selectedRes.description ? selectedRes.description : 'CATALOGS._no_desc' | translate"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(selectedRes.description, 20),
+                    'break-words': !hasLongWord(selectedRes.description, 20)
+                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900 pb-4 text-center" [data]="selectedRes.description ? selectedRes.description : 'CATALOGS._no_desc' | translate"></markdown>
                 @if(selectedRes.resourceCharacteristic != undefined && selectedRes.resourceCharacteristic.length>0) {
                     <div #charsContent id="chars-container">
                         <h2 class="text-xl font-bold dark:text-white pb-4 px-4">{{ 'PRODUCT_INVENTORY._res_details' | translate }}</h2>
diff --git a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
index c302f18d..04f4c9c6 100644
--- a/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
+++ b/src/app/pages/product-inventory/inventory-resources/inventory-resources.component.ts
@@ -134,4 +134,12 @@ export class InventoryResourcesComponent implements OnInit {
     this.getInventory(false);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/product-inventory/inventory-services/inventory-services.component.html b/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
index 8579dd6e..db1e85e5 100644
--- a/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
+++ b/src/app/pages/product-inventory/inventory-services/inventory-services.component.html
@@ -150,7 +150,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                                     <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
                                         <a (click)="selectService(serv)" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{serv.id}}</a>                                    
                                     </td>
-                                    <td class="px-6 py-4 text-wrap break-all w-1/2 md:w-1/4">
+                                    <td [ngClass]="{
+                                        'break-all': hasLongWord(serv.name, 20),
+                                        'break-words': !hasLongWord(serv.name, 20)
+                                        }" class="px-6 py-4 text-wrap break-words w-1/2 md:w-1/4">
                                         {{serv.name}}
                                     </td>
                                     <td class="hidden md:table-cell px-6 py-4 md:w-1/4">
@@ -226,7 +229,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             </div>
             <div class="p-4">
                 <h2 class="text-2xl font-extrabold text-primary-100 text-center dark:text-primary-50 pb-4">{{selectedServ.name}}</h2>
-                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900 pb-4 text-center" [data]="selectedServ.description ? selectedServ.description : 'CATALOGS._no_desc' | translate"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(selectedServ.description, 20),
+                    'break-words': !hasLongWord(selectedServ.description, 20)
+                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900 pb-4 text-center" [data]="selectedServ.description ? selectedServ.description : 'CATALOGS._no_desc' | translate"></markdown>
                 @if(selectedServ.serviceCharacteristic != undefined && selectedServ.serviceCharacteristic.length>0) {
                     <div #charsContent id="chars-container">
                         <h2 class="text-xl font-bold dark:text-white pb-4 px-4">{{ 'PRODUCT_INVENTORY._serv_chars' | translate }}</h2>
diff --git a/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts b/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
index ff29cacb..68a0958e 100644
--- a/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
+++ b/src/app/pages/product-inventory/inventory-services/inventory-services.component.ts
@@ -130,4 +130,12 @@ export class InventoryServicesComponent implements OnInit {
     this.getInventory(false);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/search-catalog/search-catalog.component.html b/src/app/pages/search-catalog/search-catalog.component.html
index e10555b5..766754c7 100644
--- a/src/app/pages/search-catalog/search-catalog.component.html
+++ b/src/app/pages/search-catalog/search-catalog.component.html
@@ -17,7 +17,10 @@
                 <svg class="rtl:rotate-180  w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                 </svg>
-                <span class="ms-1 text-sm font-medium line-clamp-1 text-wrap break-all text-gray-500 md:ms-2 dark:text-gray-400">{{ catalog.name }}</span>
+                <span [ngClass]="{
+                  'break-all': hasLongWord(catalog.name, 20),
+                  'break-words': !hasLongWord(catalog.name, 20)
+                  }" class="ms-1 text-sm font-medium line-clamp-1 text-wrap break-words text-gray-500 md:ms-2 dark:text-gray-400">{{ catalog.name }}</span>
                 </div>
             </li>
             </ol>
diff --git a/src/app/pages/search-catalog/search-catalog.component.ts b/src/app/pages/search-catalog/search-catalog.component.ts
index 0f175556..d7c86920 100644
--- a/src/app/pages/search-catalog/search-catalog.component.ts
+++ b/src/app/pages/search-catalog/search-catalog.component.ts
@@ -182,4 +182,12 @@ export class SearchCatalogComponent implements OnInit, OnDestroy{
       this.localStorage.setItem('is_filter_panel_shown', this.showPanel.toString())
     }
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.html b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.html
index a2fb2217..b39f2ca2 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.html
@@ -91,7 +91,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     } @else {
                         <div>
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_CATALOG._name' | translate }}</label>
-                            <label class="mb-2 bg-gray-50 text-wrap break-all dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                            <label [ngClass]="{
+                                'break-all': hasLongWord(catalogToCreate?.name, 20),
+                                'break-words': !hasLongWord(catalogToCreate?.name, 20)
+                                }" class="mb-2 bg-gray-50 text-wrap break-words dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                 {{catalogToCreate?.name}}
                             </label>
                         </div>
@@ -112,7 +115,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         @if(catalogToCreate?.description !=''){
                             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_CATALOG._description' | translate }}</label>
                             <div class="px-4 py-2 bg-white rounded-lg p-4 mb-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900">
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="catalogToCreate?.description"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(catalogToCreate?.description, 20),
+                                    'break-words': !hasLongWord(catalogToCreate?.description, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="catalogToCreate?.description"></markdown>
                             </div>
                         }
                     }
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
index ea18e8bd..f80dab4b 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/create-catalog/create-catalog.component.ts
@@ -281,4 +281,12 @@ export class CreateCatalogComponent implements OnInit {
       this.description=''
     }
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
index 0023d951..e022482e 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.html
@@ -151,7 +151,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             <tbody data-cy="catalogTable">
                 @for (cat of catalogs; track cat.id) {
                     <tr data-cy="catalogRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(cat.name, 20),
+                            'break-words': !hasLongWord(cat.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{cat.name}}
                         </td>
                         <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
index abbc06db..8bea053f 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/seller-catalogs.component.ts
@@ -141,4 +141,12 @@ export class SellerCatalogsComponent {
     this.nextCatalogs=[];
     this.getCatalogs(false);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.html b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.html
index a9747134..fa2b7615 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.html
@@ -168,7 +168,10 @@ <h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4">{{ 'UPDATE_
                     } @else {
                         <div>
                             <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_CATALOG._name' | translate }}</label>
-                            <label class="mb-2 bg-gray-50 text-wrap break-all dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                            <label [ngClass]="{
+                                'break-all': hasLongWord(generalForm.value.name, 20),
+                                'break-words': !hasLongWord(generalForm.value.name, 20)
+                                }" class="mb-2 bg-gray-50 text-wrap break-words dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                 {{generalForm.value.name}}
                             </label>
                         </div>
@@ -189,7 +192,10 @@ <h2 class="text-3xl font-bold text-primary-100 dark:text-white ml-4">{{ 'UPDATE_
                         @if(catalogToUpdate?.description !=''){
                             <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_CATALOG._description' | translate }}</label>
                             <div class="px-4 py-2 bg-white rounded-lg p-4 mb-4 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white text-gray-900">
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="catalogToUpdate?.description"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(catalogToUpdate?.description, 20),
+                                    'break-words': !hasLongWord(catalogToUpdate?.description, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="catalogToUpdate?.description"></markdown>
                             </div>
                         }
                         
diff --git a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
index 474215ef..e85f50bf 100644
--- a/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-catalogs/update-catalog/update-catalog.component.ts
@@ -289,5 +289,13 @@ export class UpdateCatalogComponent implements OnInit {
       this.description=''
     }  
   }
+
+  hasLongWord(str: string | undefined | null, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.html b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.html
index 7805d1cc..8447fbab 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.html
@@ -170,7 +170,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">New price c
                     <div class="px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg min-h-fit">
                         <label for="editor" class="sr-only">Publish post</label>
                         @if(showPreview){
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceComponentDescription"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(priceComponentDescription, 20),
+                                    'break-words': !hasLongWord(priceComponentDescription, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceComponentDescription"></markdown>
                             
                         }@else{
                             <textarea id="editor" formControlName="description" rows="8" class="block w-full min-h-fit px-0 text-sm text-gray-800 border-0 dark:text-gray-200 bg-white dark:bg-secondary-300" placeholder="Add product description..." ></textarea>
@@ -409,7 +412,10 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Product characteristic</
                 <div class="px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg">
                     <label for="editor" class="sr-only">Publish post</label>
                     @if(showPreview){
-                            <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceDescription"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(priceDescription, 20),
+                                'break-words': !hasLongWord(priceDescription, 20)
+                                }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceDescription"></markdown>
                         
                     }@else{
                         <textarea id="editor" formControlName="description" rows="8" class="block w-full min-h-fit px-0 text-sm text-gray-800 border-0 dark:text-gray-200 bg-white dark:bg-secondary-300" placeholder="Add product description..." ></textarea>
@@ -534,16 +540,25 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Price profile</h3>
                             <tbody>
                                 @for (price of createdPriceComponents; track price;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{price.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.description, 20),
+                                            'break-words': !hasLongWord(price.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{price.description}} 
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
                                             {{price.price.value}} {{price.price.unit}}
                                         </td>
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.priceType, 20),
+                                            'break-words': !hasLongWord(price.priceType, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{price.priceType}} 
                                         </td>
                                         <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
index f7c321af..764e1cd5 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/new-price-plan/new-price-plan.component.ts
@@ -718,4 +718,12 @@ export class NewPricePlanComponent implements OnInit {
     initFlowbite();
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
index 9956ea50..10577307 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.html
@@ -154,7 +154,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                 <tbody data-cy="offers">
                     @for (offer of offers; track offer.id) {
                         <tr data-cy="offerRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                            <td class="px-6 py-4 text-wrap break-all">
+                            <td [ngClass]="{
+                                'break-all': hasLongWord(offer.name, 20),
+                                'break-words': !hasLongWord(offer.name, 20)
+                                }" class="px-6 py-4 text-wrap break-words">
                                 {{offer.name}}
                             </td>
                             <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
index b04645ce..1cb5b7ac 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/seller-offer.component.ts
@@ -160,4 +160,12 @@ export class SellerOfferComponent implements OnInit{
 
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.html b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.html
index 4a73a269..10d7ce91 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.html
@@ -171,7 +171,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">New price c
                     <div class="px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg min-h-fit">
                         <label for="editor" class="sr-only">Publish post</label>
                         @if(showPreview){
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceComponentDescription"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(priceComponentDescription, 20),
+                                    'break-words': !hasLongWord(priceComponentDescription, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceComponentDescription"></markdown>
 
                         }@else{
                             <textarea id="editor" formControlName="description" rows="8" class="block w-full min-h-fit px-0 text-sm text-gray-800 border-0 dark:text-gray-200 bg-white dark:bg-secondary-300" placeholder="Add product description..." ></textarea>
@@ -408,7 +411,10 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Product characteristic</
                 <div class="px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg">
                     <label for="editor" class="sr-only">Publish post</label>
                     @if(showPreview){
-                            <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceDescription"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(priceDescription, 20),
+                                'break-words': !hasLongWord(priceDescription, 20)
+                                }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="priceDescription"></markdown>
 
                     }@else{
                         <textarea id="editor" formControlName="description" rows="8" class="block w-full min-h-fit px-0 text-sm text-gray-800 border-0 dark:text-gray-200 bg-white dark:bg-secondary-300" placeholder="Add product description..." ></textarea>
@@ -533,16 +539,25 @@ <h3 class="font-semibold text-gray-900 dark:text-white">Price profile</h3>
                             <tbody>
                                 @for (price of createdPriceComponents; track price;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.name, 20),
+                                            'break-words': !hasLongWord(price.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{price.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.description, 20),
+                                            'break-words': !hasLongWord(price.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{price.description}}
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
                                             {{price.price.value}} {{price.price.unit}}
                                         </td>
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(price.priceType, 20),
+                                            'break-words': !hasLongWord(price.priceType, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{price.priceType}}
                                         </td>
                                         <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
index ebdbf177..f73fe17a 100644
--- a/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-offer/update-price-plan/update-price-plan.component.ts
@@ -752,5 +752,13 @@ export class UpdatePricePlanComponent implements OnInit {
     initFlowbite();
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
 
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
index 61ff6d89..e97e1c51 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.html
@@ -238,7 +238,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of prodSpecs; track prod.id) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
                                             <td class="hidden md:table-cell px-6 py-4">
@@ -377,7 +380,10 @@ <h3 class="font-bold text-primary-100 dark:text-primary-50 text-left ml-4">
                             <tbody>
                                 @for (sel of selectedISOS; track sel.name; let idx = $index) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(sel.name, 20),
+                                            'break-words': !hasLongWord(sel.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{sel.name}}
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -482,10 +488,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of prodChars; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
@@ -751,7 +763,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             <tbody>
                                 @for (res of resourceSpecs; track res.id) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(res.name, 20),
+                                            'break-words': !hasLongWord(res.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{res.name}}
                                         </td>
                                         <td class="hidden md:table-cell px-6 py-4">
@@ -851,7 +866,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             <tbody>
                                 @for (serv of serviceSpecs; track serv.id) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(serv.name, 20),
+                                            'break-words': !hasLongWord(serv.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{serv.name}}
                                         </td>
                                         <td class="hidden md:table-cell px-6 py-4">
@@ -1018,7 +1036,10 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'CREATE_PROD_SPEC._add_att
                                 <tbody>
                                     @for (att of prodAttachments; track att) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(att.name, 20),
+                                                'break-words': !hasLongWord(att.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{att.name}}
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
@@ -1149,7 +1170,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                                 <td class="px-6 py-4">
                                                     {{rel.relationshipType}}
                                                 </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(rel.productSpec.name, 20),
+                                                    'break-words': !hasLongWord(rel.productSpec.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{rel.productSpec.name}}
                                                 </td>
                                                 <td class="hidden md:table-cell px-6 py-4">
@@ -1237,7 +1261,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                             @for (rel of prodSpecRels; track rel) {
                                                 <tr class="border-b hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-secondary-200" (click)="selectRelationship(rel)" 
                                                     [ngClass]="rel.id == selectedProdSpec.id ? 'bg-gray-300 dark:bg-secondary-200' : 'bg-white dark:bg-secondary-300'">
-                                                    <td class="px-6 py-4 text-wrap break-all">
+                                                    <td [ngClass]="{
+                                                        'break-all': hasLongWord(rel.name, 20),
+                                                        'break-words': !hasLongWord(rel.name, 20)
+                                                        }" class="px-6 py-4 text-wrap break-words">
                                                         {{rel.name}}
                                                     </td>
                                                     <td class="px-6 py-4">
@@ -1311,7 +1338,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         <div class="mb-4 md:grid md:grid-cols-2 gap-4">
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                <label [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToCreate?.name, 20),
+                                    'break-words': !hasLongWord(productSpecToCreate?.name, 20)
+                                    }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                     {{productSpecToCreate?.name}}
                                 </label>
                                 <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_version' | translate }}</label>
@@ -1321,7 +1351,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             </div>
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_brand' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" >
+                                <label [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToCreate?.brand, 20),
+                                    'break-words': !hasLongWord(productSpecToCreate?.brand, 20)
+                                    }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" >
                                     {{productSpecToCreate?.brand}}
                                 </label>
                                 @if(productSpecToCreate?.productNumber!=''){
@@ -1349,7 +1382,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                         @if(productSpecToCreate?.description !=''){
                             <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_description' | translate }}</label>
                             <div class="px-4 py-2 bg-white rounded-lg p-4 dark:bg-secondary-300 border dark:border-secondary-200"> 
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToCreate?.description"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToCreate?.description, 20),
+                                    'break-words': !hasLongWord(productSpecToCreate?.description, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToCreate?.description"></markdown>
                             </div>
                         }
 
@@ -1377,7 +1413,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <tbody>
                                         @for (bun of prodSpecsBundle; track bun) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(bun.name, 20),
+                                                    'break-words': !hasLongWord(bun.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{bun.name}}
                                                 </td>
                                                 <td class="px-6 py-4">
@@ -1418,10 +1457,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <tbody>
                                         @for (prod of productSpecToCreate?.productSpecCharacteristic; track prod;) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(prod.name, 20),
+                                                    'break-words': !hasLongWord(prod.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{prod.name}}
                                                 </td>
-                                                <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(prod.description, 20),
+                                                    'break-words': !hasLongWord(prod.description, 20)
+                                                    }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                     {{prod.description}}                                       
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
@@ -1470,7 +1515,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <tbody>
                                         @for (res of selectedResourceSpecs; track res) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(res.name, 20),
+                                                    'break-words': !hasLongWord(res.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{res.name}}
                                                 </td>
                                             </tr>
@@ -1494,7 +1542,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <tbody>
                                         @for (serv of selectedServiceSpecs; track serv) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(serv.name, 20),
+                                                    'break-words': !hasLongWord(serv.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{serv.name}}
                                                 </td>
                                             </tr>
@@ -1521,7 +1572,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                     <tbody>
                                         @for (att of productSpecToCreate?.attachment; track att) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(att.name, 20),
+                                                    'break-words': !hasLongWord(att.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{att.name}}
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
@@ -1560,7 +1614,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                                 <td class="px-6 py-4">
                                                     {{rel.relationshipType}}
                                                 </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(rel.productSpec.name, 20),
+                                                    'break-words': !hasLongWord(rel.productSpec.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{rel.productSpec.name}}
                                                 </td>
                                                 <td class="hidden md:table-cell px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
index feb4c357..efef7bac 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/create-product-spec/create-product-spec.component.ts
@@ -1379,4 +1379,12 @@ export class CreateProductSpecComponent implements OnInit {
     });
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.html
index 35fc056b..4e7a4808 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.html
@@ -155,7 +155,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             <tbody data-cy="prodSpecTable">
                 @for (prod of prodSpecs; track prod.id) {
                     <tr data-cy="prodSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(prod.name, 20),
+                            'break-words': !hasLongWord(prod.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{prod.name}}
                         </td>
                         <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
index af8a27e3..bac99853 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/seller-product-spec.component.ts
@@ -160,4 +160,12 @@ export class SellerProductSpecComponent implements OnInit{
     }
     this.getProdSpecs(false);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
\ No newline at end of file
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
index b8aaf27b..1719eb19 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.html
@@ -301,7 +301,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                 <tbody>
                                     @for (prod of prodSpecs; track prod.id) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
                                             <td class="hidden md:table-cell px-6 py-4">
@@ -466,7 +469,10 @@ <h3 class="font-semibold text-gray-900 dark:text-white">{{ 'UPDATE_PROD_SPEC._ho
                             <tbody>
                                 @for (sel of selectedISOS; track sel.name; let idx = $index) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(sel.name, 20),
+                                            'break-words': !hasLongWord(sel.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{sel.name}}
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -585,10 +591,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                 <tbody>
                                     @for (prod of prodChars; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
@@ -862,7 +874,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                             <tbody>
                                 @for (res of resourceSpecs; track res.id) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(res.name, 20),
+                                            'break-words': !hasLongWord(res.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{res.name}}
                                         </td>
                                         <td class="hidden md:table-cell px-6 py-4">
@@ -962,7 +977,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                             <tbody>
                                 @for (serv of serviceSpecs; track serv.id) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(serv.name, 20),
+                                            'break-words': !hasLongWord(serv.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{serv.name}}
                                         </td>
                                         <td class="hidden md:table-cell px-6 py-4">
@@ -1128,7 +1146,10 @@ <h4 class="text-lg font-bold ml-4 dark:text-white">{{ 'UPDATE_PROD_SPEC._add_att
                                 <tbody>
                                     @for (att of prodAttachments; track att) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(att.name, 20),
+                                                'break-words': !hasLongWord(att.name, 20)
+                                                }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                                                 {{att.name}}
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
@@ -1253,7 +1274,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                                 <td class="px-6 py-4">
                                                     {{rel.relationshipType}}
                                                 </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(rel.name, 20),
+                                                    'break-words': !hasLongWord(rel.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{rel.name}}
                                                 </td>
                                                 <td class="px-6 py-4">
@@ -1327,7 +1351,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                             @for (rel of prodSpecRels; track rel) {
                                                 <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200" (click)="selectRelationship(rel)" 
                                                     [ngClass]="rel.id == selectedProdSpec.id ? 'bg-gray-300 dark:bg-secondary-200' : 'bg-white dark:bg-secondary-300'">
-                                                    <td class="px-6 py-4 text-wrap break-all">
+                                                    <td [ngClass]="{
+                                                        'break-all': hasLongWord(rel.name, 20),
+                                                        'break-words': !hasLongWord(rel.name, 20)
+                                                        }" class="px-6 py-4 text-wrap break-words">
                                                         {{rel.name}}
                                                     </td>
                                                     <td class="hidden md:table-cell px-6 py-4">
@@ -1401,7 +1428,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                         <div class="mb-4 md:grid md:grid-cols-2 gap-4">
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_name' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                                <label [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToUpdate?.name, 20),
+                                    'break-words': !hasLongWord(productSpecToUpdate?.name, 20)
+                                    }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                     {{productSpecToUpdate?.name}}
                                 </label>
                                 <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_version' | translate }}</label>
@@ -1411,7 +1441,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                             </div>
                             <div>
                                 <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_brand' | translate }}</label>
-                                <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" >
+                                <label [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToUpdate?.brand, 20),
+                                    'break-words': !hasLongWord(productSpecToUpdate?.brand, 20)
+                                    }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" >
                                     {{productSpecToUpdate?.brand}}
                                 </label>
                                 @if(productSpecToUpdate?.productNumber!=''){
@@ -1439,7 +1472,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                         @if(productSpecToUpdate?.description !=''){
                             <label class="font-bold text-lg dark:text-white">{{ 'UPDATE_PROD_SPEC._product_description' | translate }}</label>
                             <div class="px-4 py-2 bg-white dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4">                                
-                                <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToUpdate?.description"></markdown>
+                                <markdown [ngClass]="{
+                                    'break-all': hasLongWord(productSpecToUpdate?.description, 20),
+                                    'break-words': !hasLongWord(productSpecToUpdate?.description, 20)
+                                    }" class="bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900" [data]="productSpecToUpdate?.description"></markdown>
                             </div>
                         }
 
@@ -1467,7 +1503,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                     <tbody>
                                         @for (bun of prodSpecsBundle; track bun) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(bun.name, 20),
+                                                    'break-words': !hasLongWord(bun.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{bun.name}}
                                                 </td>
                                                 <td class="px-6 py-4">
@@ -1508,10 +1547,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                     <tbody>
                                         @for (prod of productSpecToUpdate?.productSpecCharacteristic; track prod;) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(prod.name, 20),
+                                                    'break-words': !hasLongWord(prod.name, 20)
+                                                    }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                                                     {{prod.name}}
                                                 </td>
-                                                <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(prod.description, 20),
+                                                    'break-words': !hasLongWord(prod.description, 20)
+                                                    }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                     {{prod.description}}                                       
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
@@ -1560,7 +1605,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                     <tbody>
                                         @for (res of selectedResourceSpecs; track res) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(res.name, 20),
+                                                    'break-words': !hasLongWord(res.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{res.name}}
                                                 </td>
                                             </tr>
@@ -1584,7 +1632,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                     <tbody>
                                         @for (serv of selectedServiceSpecs; track serv) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(serv.name, 20),
+                                                    'break-words': !hasLongWord(serv.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{serv.name}}
                                                 </td>
                                             </tr>
@@ -1611,7 +1662,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                     <tbody>
                                         @for (att of productSpecToUpdate?.attachment; track att) {
                                             <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                                <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(att.name, 20),
+                                                    'break-words': !hasLongWord(att.name, 20)
+                                                    }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                                                     {{att.name}}
                                                 </td>
                                                 <td class="px-6 py-4 text-wrap break-all">
@@ -1644,7 +1698,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                                                 <td class="px-6 py-4">
                                                     {{rel.relationshipType}}
                                                 </td>
-                                                <td class="px-6 py-4 text-wrap break-all">
+                                                <td [ngClass]="{
+                                                    'break-all': hasLongWord(rel.name, 20),
+                                                    'break-words': !hasLongWord(rel.name, 20)
+                                                    }" class="px-6 py-4 text-wrap break-words">
                                                     {{rel.name}}
                                                 </td>
                                             </tr>
diff --git a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
index 88b33850..a4d3e922 100644
--- a/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-product-spec/update-product-spec/update-product-spec.component.ts
@@ -1612,4 +1612,12 @@ export class UpdateProductSpecComponent implements OnInit {
     });
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
index 7cb9ec39..1d784b92 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.html
@@ -122,10 +122,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             <tbody>
                                 @for (prod of prodChars; track prod;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.name, 20),
+                                            'break-words': !hasLongWord(prod.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{prod.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.description, 20),
+                                            'break-words': !hasLongWord(prod.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{prod.description}}                                       
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -336,7 +342,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     } @else {
                     <div>
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                        <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label [ngClass]="{
+                            'break-all': hasLongWord(resourceToCreate?.name, 20),
+                            'break-words': !hasLongWord(resourceToCreate?.name, 20)
+                            }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             {{resourceToCreate?.name}}
                         </label>
                     </div>
@@ -357,7 +366,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     @if(resourceToCreate?.description !=''){
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                         <div class="px-4 py-2 bg-white dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4">
-                            <markdown class="bg-gray-50 dark:bg-secondary-100 dark:text-white text-gray-900 text-wrap break-all" [data]="resourceToCreate?.description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(resourceToCreate?.description, 20),
+                                'break-words': !hasLongWord(resourceToCreate?.description, 20)
+                                }" class="bg-gray-50 dark:bg-secondary-100 dark:text-white text-gray-900 text-wrap break-words" [data]="resourceToCreate?.description"></markdown>
                         </div>
                     }
                     
@@ -381,10 +393,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of resourceToCreate?.resourceSpecCharacteristic; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
index f369bb1a..1ac7c88c 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/create-resource-spec/create-resource-spec.component.ts
@@ -462,4 +462,12 @@ export class CreateResourceSpecComponent implements OnInit {
       this.description=''
     }  
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
index 1f311920..c6bbd25c 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.html
@@ -136,7 +136,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
                 <tbody>
                     @for (res of resSpecs; track res.id) {
                         <tr data-cy="resSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                            <td class="px-6 py-4 text-wrap break-all">
+                            <td [ngClass]="{
+                                'break-all': hasLongWord(res.name, 20),
+                                'break-words': !hasLongWord(res.name, 20)
+                                }" class="px-6 py-4 text-wrap break-words">
                                 {{res.name}}
                             </td>
                             <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
index 52dc26f7..9735047d 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/seller-resource-spec.component.ts
@@ -147,4 +147,12 @@ export class SellerResourceSpecComponent implements OnInit {
     }
     this.getResSpecs(false);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
index 4bd689df..4b46f733 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.html
@@ -237,10 +237,16 @@ <h5 class="flex justify-center mb-2 p-2 text-2xl font-bold tracking-tight text-w
                             <tbody>
                                 @for (prod of prodChars; track prod;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.name, 20),
+                                            'break-words': !hasLongWord(prod.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{prod.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.description, 20),
+                                            'break-words': !hasLongWord(prod.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{prod.description}}                                       
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -451,7 +457,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     } @else {
                     <div>
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                        <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label [ngClass]="{
+                            'break-all': hasLongWord(resourceToUpdate?.name, 20),
+                            'break-words': !hasLongWord(resourceToUpdate?.name, 20)
+                            }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             {{resourceToUpdate?.name}}
                         </label>
                     </div>
@@ -472,7 +481,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     @if(resourceToUpdate?.description !=''){
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                         <div class="px-4 py-2 bg-white dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4">
-                            <markdown class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-all" [data]="resourceToUpdate?.description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(resourceToUpdate?.description, 20),
+                                'break-words': !hasLongWord(resourceToUpdate?.description, 20)
+                                }" class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-words" [data]="resourceToUpdate?.description"></markdown>
                         </div>
                     }
                     
@@ -496,10 +508,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of resourceToUpdate?.resourceSpecCharacteristic; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
diff --git a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
index ad90956e..2156a2a8 100644
--- a/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-resource-spec/update-resource-spec/update-resource-spec.component.ts
@@ -462,4 +462,12 @@ export class UpdateResourceSpecComponent implements OnInit {
     }   
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
index add1e2a8..7b59cef0 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.html
@@ -122,10 +122,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                             <tbody>
                                 @for (prod of prodChars; track prod;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.name, 20),
+                                            'break-words': !hasLongWord(prod.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{prod.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.description, 20),
+                                            'break-words': !hasLongWord(prod.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{prod.description}}                                       
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -337,7 +343,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     } @else {
                     <div>
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                        <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label [ngClass]="{
+                            'break-all': hasLongWord(serviceToCreate?.name, 20),
+                            'break-words': !hasLongWord(serviceToCreate?.name, 20)
+                            }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             {{serviceToCreate?.name}}
                         </label>
                     </div>
@@ -358,7 +367,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     @if(serviceToCreate?.description !=''){
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                         <div class="px-4 py-2 bg-white dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-2"> 
-                            <markdown class="bg-gray-50 text-wrap break-all dark:bg-secondary-100 dark:text-white text-gray-900 text-wrap break-all" [data]="serviceToCreate?.description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(serviceToCreate?.description, 20),
+                                'break-words': !hasLongWord(serviceToCreate?.description, 20)
+                                }" class="bg-gray-50 dark:bg-secondary-100 dark:text-white text-gray-900 text-wrap break-words" [data]="serviceToCreate?.description"></markdown>
                         </div>
                     }
                     
@@ -382,10 +394,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of serviceToCreate?.specCharacteristic; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
index 840c887b..cbcd405d 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/create-service-spec/create-service-spec.component.ts
@@ -454,4 +454,12 @@ export class CreateServiceSpecComponent implements OnInit {
     }   
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
index a9867c62..2cc12f3a 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.html
@@ -137,7 +137,10 @@ <h2 class="text-base font-bold">{{ 'OFFERINGS._order_by' | translate }}</h2>
             <tbody>
                 @for (serv of servSpecs; track serv.id) {
                     <tr data-cy="servSpecRow" class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(serv.name, 20),
+                            'break-words': !hasLongWord(serv.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{serv.name}}
                         </td>
                         <td class="px-6 py-4">
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
index b30b6e28..fd5592af 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/seller-service-spec.component.ts
@@ -146,4 +146,12 @@ export class SellerServiceSpecComponent implements OnInit {
     }
     this.getServSpecs(false);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
index bddac745..ded8bef9 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.html
@@ -200,10 +200,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'UPDATE_
                             <tbody>
                                 @for (prod of prodChars; track prod;) {
                                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                        <td class="px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.name, 20),
+                                            'break-words': !hasLongWord(prod.name, 20)
+                                            }" class="px-6 py-4 text-wrap break-words">
                                             {{prod.name}}
                                         </td>
-                                        <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                        <td [ngClass]="{
+                                            'break-all': hasLongWord(prod.description, 20),
+                                            'break-words': !hasLongWord(prod.description, 20)
+                                            }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                             {{prod.description}}                                       
                                         </td>
                                         <td class="px-6 py-4 text-wrap break-all">
@@ -414,7 +420,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     } @else {
                     <div>
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_name' | translate }}</label>
-                        <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                        <label [ngClass]="{
+                            'break-all': hasLongWord(serviceToUpdate?.name, 20),
+                            'break-words': !hasLongWord(serviceToUpdate?.name, 20)
+                            }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                             {{serviceToUpdate?.name}}
                         </label>
                     </div>
@@ -435,7 +444,10 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                     @if(serviceToUpdate?.description !=''){
                         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_PROD_SPEC._product_description' | translate }}</label>
                         <div class="px-4 py-2 bg-white dark:bg-secondary-300 border dark:border-secondary-200 rounded-lg p-4 mb-4"> 
-                            <markdown class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-all" [data]="serviceToUpdate?.description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(serviceToUpdate?.description, 20),
+                                'break-words': !hasLongWord(serviceToUpdate?.description, 20)
+                                }" class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-words" [data]="serviceToUpdate?.description"></markdown>
                         </div>
                     }
                     
@@ -459,10 +471,16 @@ <h2 class="text-3xl font-bold text-primary-100 ml-4 dark:text-white">{{ 'CREATE_
                                 <tbody>
                                     @for (prod of serviceToUpdate?.specCharacteristic; track prod;) {
                                         <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                                            <td class="px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.name, 20),
+                                                'break-words': !hasLongWord(prod.name, 20)
+                                                }" class="px-6 py-4 text-wrap break-words">
                                                 {{prod.name}}
                                             </td>
-                                            <td class="hidden lg:table-cell px-6 py-4 text-wrap break-all">
+                                            <td [ngClass]="{
+                                                'break-all': hasLongWord(prod.description, 20),
+                                                'break-words': !hasLongWord(prod.description, 20)
+                                                }" class="hidden lg:table-cell px-6 py-4 text-wrap break-words">
                                                 {{prod.description}}                                       
                                             </td>
                                             <td class="px-6 py-4 text-wrap break-all">
diff --git a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
index 79fca091..bb0c96fc 100644
--- a/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
+++ b/src/app/pages/seller-offerings/offerings/seller-service-spec/update-service-spec/update-service-spec.component.ts
@@ -457,6 +457,13 @@ export class UpdateServiceSpecComponent implements OnInit {
       this.description=''
     }   
   }
-
+  
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 
 }
diff --git a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
index e5d29169..4be0b8d9 100644
--- a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
+++ b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.html
@@ -47,7 +47,10 @@ <h2 class="text-2xl font-bold mb-4 dark:text-white">{{ 'USAGE_SPECS._list' | tra
             <tbody>
                 @for (usage of usageSpecs; track usage.id) {
                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(usage.name, 20),
+                            'break-words': !hasLongWord(usage.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{usage.name}}
                         </td>
                         <td class="hidden md:table-cell px-6 py-4">
diff --git a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
index 00c9908d..c1ef055f 100644
--- a/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
+++ b/src/app/pages/usage-specs/usage-sections/usage-list/usage-list.component.ts
@@ -89,4 +89,12 @@ export class UsageListComponent  implements OnInit {
     this.eventMessage.emitUpdateUsageSpec(usageSpec);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.html b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.html
index e68e14cc..91592bb4 100644
--- a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.html
+++ b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.html
@@ -34,7 +34,10 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
                 <tbody>
                     @for (bill of billing_accounts; track bill.id) {
                         <tr (click)="selectBill(bill)" class="border-b hover:bg-gray-200 dark:border-gray-700 dark:hover:bg-secondary-200" [ngClass]="bill.selected == true ? 'bg-primary-30 dark:bg-secondary-200' : 'bg-white dark:bg-secondary-300'">
-                            <td class="px-6 py-4 text-wrap break-all">
+                            <td [ngClass]="{
+                                'break-all': hasLongWord(bill.name, 20),
+                                'break-words': !hasLongWord(bill.name, 20)
+                                }" class="px-6 py-4 text-wrap break-words">
                                 {{bill.name}}
                             </td>
                             <td class="px-6 py-4 text-wrap break-all">
diff --git a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
index 49157777..fd3eb82d 100644
--- a/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/billing-info/billing-info.component.ts
@@ -290,4 +290,12 @@ export class BillingInfoComponent implements OnInit{
     this.billToDelete=bill;
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.html b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.html
index 8114a98b..20848ab0 100644
--- a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.html
+++ b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.html
@@ -127,7 +127,10 @@ <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-whi
                 <div class="px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg">
                     <label for="editor" class="sr-only">Publish post</label>
                     @if(showPreview){
-                            <markdown class="text-gray-800 dark:text-gray-200 text-wrap break-all" [data]="description"></markdown>
+                            <markdown [ngClass]="{
+                                'break-all': hasLongWord(description, 20),
+                                'break-words': !hasLongWord(description, 20)
+                                }" class="text-gray-800 dark:text-gray-200 text-wrap break-words" [data]="description"></markdown>
                         
                     }@else{
                         <textarea id="editor" formControlName="description" rows="8" class="block w-full min-h-fit px-0 text-sm text-gray-800 dark:text-gray-200 bg-white dark:bg-secondary-300 border-0" placeholder="Add product description..." ></textarea>
diff --git a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
index 9b6b3819..9ee3ff69 100644
--- a/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
+++ b/src/app/pages/user-profile/profile-sections/org-info/org-info.component.ts
@@ -822,4 +822,12 @@ export class OrgInfoComponent implements OnInit {
       }
     }
 
+    hasLongWord(str: string | undefined, threshold = 20) {
+      if(str){
+        return str.split(/\s+/).some(word => word.length > threshold);
+      } else {
+        return false
+      }   
+    }
+
 }
diff --git a/src/app/shared/card/card.component.html b/src/app/shared/card/card.component.html
index 5678b8a4..5412b371 100644
--- a/src/app/shared/card/card.component.html
+++ b/src/app/shared/card/card.component.html
@@ -143,7 +143,10 @@
             <div class="w-full mb-4 rounded-t-lg grid grid-cols-80/20 lg:grid-cols-60/40">
 
               <div class="flex flex-col p-4 overflow-x-hidden">
-                  <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-primary-50 text-wrap break-all">{{productOff?.name}}</h5>
+                  <h5 [ngClass]="{
+                    'break-all': hasLongWord(productOff?.name, 20),
+                    'break-words': !hasLongWord(productOff?.name, 20)
+                  }" class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100 dark:text-primary-50 text-wrap break-words">{{productOff?.name}}</h5>
                   <div class="grid grid-cols-2">
                       <div class="min-h-19 pt-2 text-gray-500 dark:text-gray-400">V: {{productOff?.version || 'latest'}}</div>
                   </div>
@@ -203,7 +206,10 @@ <h5 class="md:text-3xl lg:text-4xl font-semibold tracking-tight text-primary-100
             <div class="p-4 lg:p-5 grid grid-cols-1 lg:grid-cols-2 gap-4">
               <div class="justify-start">
                   <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-primary-50">{{ 'CARD._prod_details' | translate }}:</h5>
-                  <markdown class="min-h-19 h-19 dark:text-secondary-50 line-clamp-6 text-wrap break-all" [data]="productOff?.description"></markdown>
+                  <markdown [ngClass]="{
+                    'break-all': hasLongWord(productOff?.description, 20),
+                    'break-words': !hasLongWord(productOff?.description, 20)
+                  }" class="min-h-19 h-19 dark:text-secondary-50 line-clamp-6 text-wrap break-words" [data]="productOff?.description"></markdown>
               </div>
               <!--<div class="justify-start">
                 <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-primary-50">{{ 'CARD._comp_profile' | translate }}:</h5>
@@ -229,7 +235,10 @@ <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-prima
                         <li class="text-wrap break-all line-clamp-1">{{ 'CARD._id_number' | translate }}: {{prodSpec.productNumber}}</li>
                       }
                       @if(orgInfo!=undefined){
-                        <li class="text-wrap break-all line-clamp-1">{{ 'CARD._owner' | translate }}: <a (click)="goToOrgDetails(orgInfo.id)" target="_blank" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{orgInfo.tradingName}}</a></li>
+                        <li [ngClass]="{
+                          'break-all': hasLongWord(orgInfo.tradingName, 20),
+                          'break-words': !hasLongWord(orgInfo.tradingName, 20)
+                        }" class="text-wrap break-words line-clamp-1">{{ 'CARD._owner' | translate }}: <a (click)="goToOrgDetails(orgInfo.id)" target="_blank" class="cursor-pointer font-medium text-primary-100 dark:text-primary-50 hover:underline">{{orgInfo.tradingName}}</a></li>
                       }
                     </ul>
               </div>
diff --git a/src/app/shared/cart-card/cart-card.component.html b/src/app/shared/cart-card/cart-card.component.html
index a789860f..8b734fe3 100644
--- a/src/app/shared/cart-card/cart-card.component.html
+++ b/src/app/shared/cart-card/cart-card.component.html
@@ -59,7 +59,10 @@ <h5 class="text-3xl font-semibold tracking-tight text-primary-100 ">{{ 'CARD._se
                                     <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 w-full">{{price.name}}</h5>
                                 </div>
                                 <div class="pl-4 pr-4">
-                                    <markdown class="w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                    <markdown [ngClass]="{
+                                        'break-all': hasLongWord(price?.description, 20),
+                                        'break-words': !hasLongWord(price?.description, 20)
+                                        }" class="w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                 </div>
                               </div>
 
@@ -73,10 +76,16 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
 
                               <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow w-full">
                                   <div class="bg-yellow-300 rounded-t-lg w-full">
-                                      <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-all">{{price.name}}</h5>
+                                      <h5 [ngClass]="{
+                                        'break-all': hasLongWord(price.name, 20),
+                                        'break-words': !hasLongWord(price.name, 20)
+                                        }" class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900 text-wrap break-words">{{price.name}}</h5>
                                   </div>
                                   <div class="pl-4 pr-4">
-                                    <markdown class="w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                    <markdown [ngClass]="{
+                                        'break-all': hasLongWord(price?.description, 20),
+                                        'break-words': !hasLongWord(price?.description, 20)
+                                        }" class="w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                 </div>
                               </div>
                             </label>
@@ -90,7 +99,10 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
                                         <div class="flex justify-start mb-2">
                                             <h2 class="text-gray-900 text-3xl font-extrabold mb-2">{{price.name}}</h2>
                                         </div>
-                                        <markdown class="w-full text-wrap break-all p-4" [data]="price?.description"></markdown>
+                                        <markdown [ngClass]="{
+                                            'break-all': hasLongWord(price?.description, 20),
+                                            'break-words': !hasLongWord(price?.description, 20)
+                                            }" class="w-full text-wrap break-words p-4" [data]="price?.description"></markdown>
                                     </div>
                                 </label>
                             </div>
@@ -104,7 +116,10 @@ <h2 class="text-gray-900 text-3xl font-extrabold mb-2">{{price.name}}</h2>
                                     <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-gray-900">{{price.name}}</h5>
                                 </div>
                                 <div class="pl-4 pr-4">
-                                    <markdown class="w-full p-4 text-wrap break-all" [data]="price?.description"></markdown>
+                                    <markdown [ngClass]="{
+                                        'break-all': hasLongWord(price?.description, 20),
+                                        'break-words': !hasLongWord(price?.description, 20)
+                                        }" class="w-full p-4 text-wrap break-words" [data]="price?.description"></markdown>
                                 </div>
                             </div>
                           </label>
diff --git a/src/app/shared/cart-card/cart-card.component.ts b/src/app/shared/cart-card/cart-card.component.ts
index 0db90c96..99ac19c7 100644
--- a/src/app/shared/cart-card/cart-card.component.ts
+++ b/src/app/shared/cart-card/cart-card.component.ts
@@ -394,4 +394,12 @@ export class CartCardComponent implements OnInit {
 
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/shared/cart-drawer/cart-drawer.component.html b/src/app/shared/cart-drawer/cart-drawer.component.html
index 16c99233..3825bd50 100644
--- a/src/app/shared/cart-drawer/cart-drawer.component.html
+++ b/src/app/shared/cart-drawer/cart-drawer.component.html
@@ -54,7 +54,11 @@
                   </div>
                   <div class="p-2 flex items-center w-2/3">
                     <p (click)="goToProdDetails(item)"
-                      class="text-lg text-gray-700 dark:text-gray-400 line-clamp-4 text-wrap break-all cursor-pointer"
+                    [ngClass]="{
+                      'break-all': hasLongWord(item.name, 20),
+                      'break-words': !hasLongWord(item.name, 20)
+                      }"
+                      class="text-lg text-gray-700 dark:text-gray-400 line-clamp-4 text-wrap break-words cursor-pointer"
                       role="button" tabindex="0">
                       {{ item.name }}
                     </p>
diff --git a/src/app/shared/cart-drawer/cart-drawer.component.ts b/src/app/shared/cart-drawer/cart-drawer.component.ts
index a0be3cde..fdf16b04 100644
--- a/src/app/shared/cart-drawer/cart-drawer.component.ts
+++ b/src/app/shared/cart-drawer/cart-drawer.component.ts
@@ -148,5 +148,13 @@ export class CartDrawerComponent implements OnInit{
   isArray(value: any): value is any[] {
     return Array.isArray(value);
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
   
 }
diff --git a/src/app/shared/categories-filter/categories-filter.component.html b/src/app/shared/categories-filter/categories-filter.component.html
index 735185a9..81dda8ce 100644
--- a/src/app/shared/categories-filter/categories-filter.component.html
+++ b/src/app/shared/categories-filter/categories-filter.component.html
@@ -6,7 +6,10 @@ <h2 [id]="'accordion-heading-'+idx">
           @if (category.children) {
             @if (category.children.length != 0) {
               <div [ngClass]="checkClasses($first,$last,category)">
-                <span class="text-left justify-start text-wrap break-all">{{ category?.name }}</span>
+                <span [ngClass]="{
+                  'break-all': hasLongWord(category?.name, 20),
+                  'break-words': !hasLongWord(category?.name, 20)
+                  }" class="text-left justify-start text-wrap break-words">{{ category?.name }}</span>
                 <div class="justify-end inline-flex">
                   <div class="justify-end" (click)="onClick(category)">
                     <input [checked]="isCheckedCategory(category)" type="checkbox" value="" class="hidden peer">
diff --git a/src/app/shared/categories-filter/categories-filter.component.ts b/src/app/shared/categories-filter/categories-filter.component.ts
index a1e0d0ad..4eec1704 100644
--- a/src/app/shared/categories-filter/categories-filter.component.ts
+++ b/src/app/shared/categories-filter/categories-filter.component.ts
@@ -259,4 +259,12 @@ export class CategoriesFilterComponent implements OnInit {
     }
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/shared/categories-panel/categories-panel.component.html b/src/app/shared/categories-panel/categories-panel.component.html
index d171c25f..e6f88c9b 100644
--- a/src/app/shared/categories-panel/categories-panel.component.html
+++ b/src/app/shared/categories-panel/categories-panel.component.html
@@ -4,9 +4,15 @@
     <div class="overflow-x-auto max-h-[46px] inline-flex">
       @if(selected.length > 0){
         @for(category of selected; track category.id; let idx = $index) {
-        <span [id]="'badge-dismiss-'+idx" class="text-wrap break-all" title="{{category?.name}}"
+        <span [ngClass]="{
+          'break-all': hasLongWord(category?.name, 20),
+          'break-words': !hasLongWord(category?.name, 20)
+          }" [id]="'badge-dismiss-'+idx" class="text-wrap break-words" title="{{category?.name}}"
         class="inline-flex min-w-fit mb-1 justify-between items-center px-2 py-1 me-2 text-xs font-medium text-primary-100 border border-1 border-primary-100 bg-secondary-50 rounded dark:bg-secondary-100 dark:text-secondary-50">
-          <span class="line-clamp-1 min-w-fit text-wrap break-all"><fa-icon [icon]="faTag" class="mr-2"></fa-icon>{{category?.name}}</span>
+          <span [ngClass]="{
+            'break-all': hasLongWord(category?.name, 20),
+            'break-words': !hasLongWord(category?.name, 20)
+            }" class="line-clamp-1 min-w-fit text-wrap break-words"><fa-icon [icon]="faTag" class="mr-2"></fa-icon>{{category?.name}}</span>
           <button type="button" (click)="notifyDismiss(category)"
           class="inline-flex items-center p-1 ms-2 text-sm text-primary-100 dark:text-secondary-50 bg-transparent rounded-sm hover:bg-primary-100 hover:text-secondary-50 dark:hover:bg-primary-50 dark:hover:text-primary-100" [attr.data-dismiss-target]="'#badge-dismiss-'+idx" aria-label="Remove">
           <svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
diff --git a/src/app/shared/categories-panel/categories-panel.component.ts b/src/app/shared/categories-panel/categories-panel.component.ts
index 7e736ea3..5601841b 100644
--- a/src/app/shared/categories-panel/categories-panel.component.ts
+++ b/src/app/shared/categories-panel/categories-panel.component.ts
@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import { NgClass } from '@angular/common';
 import {TranslateModule} from "@ngx-translate/core";
 import {LocalStorageService} from "../../services/local-storage.service";
 import {Category} from "../../models/interfaces";
@@ -13,7 +14,8 @@ import {faTag} from "@fortawesome/pro-solid-svg-icons";
   standalone: true,
   imports: [
     TranslateModule,
-    FaIconComponent
+    FaIconComponent,
+    NgClass
   ],
   templateUrl: './categories-panel.component.html',
   styleUrl: './categories-panel.component.css'
@@ -50,6 +52,14 @@ export class CategoriesPanelComponent implements OnInit {
     this.eventMessage.emitRemovedFilter(cat);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
   protected readonly faAddressCard = faAddressCard;
   protected readonly faFilterList = faFilterList;
   protected readonly faTag = faTag;
diff --git a/src/app/shared/category-item/category-item.component.html b/src/app/shared/category-item/category-item.component.html
index 8ea9f7a4..f4d76ee0 100644
--- a/src/app/shared/category-item/category-item.component.html
+++ b/src/app/shared/category-item/category-item.component.html
@@ -3,7 +3,10 @@
     <input [(ngModel)]="checked" type="checkbox" [id]="option" value="" class="hidden peer" #optioninput>
     <label [for]="option" [ngClass]="isParent && isFirst ? labelClassParentFirst : isParent && isLast ? labelClassParentLast : isParent ? labelClassParent : labelClass" (click)="onClick(optioninput.checked)">
       <div class="flex w-full justify-between items-center">
-        <div class="w-full text-base text-left font-semibold text-wrap break-all">{{ data?.name }}</div>
+        <div [ngClass]="{
+          'break-all': hasLongWord(data?.name, 20),
+          'break-words': !hasLongWord(data?.name, 20)
+          }" class="w-full text-base text-left font-semibold text-wrap break-words">{{ data?.name }}</div>
         <fa-icon [icon]="checked ? faCircleCheck : faCircle" class="mr-7 text-2xl"></fa-icon>
       </div>
     </label>
@@ -11,7 +14,10 @@
     @if(data){
       <h2 [id]="'accordion-heading-'+simplifiedId">
         <div [ngClass]="checkClasses(isFirst,isLast,data)">
-          <span class="text-left justify-start text-wrap break-all">{{ data.name }}</span>
+          <span [ngClass]="{
+            'break-all': hasLongWord(data.name, 20),
+            'break-words': !hasLongWord(data.name, 20)
+            }" class="text-left justify-start text-wrap break-words">{{ data.name }}</span>
           <div class="justify-end inline-flex">
             <div class="justify-end" (click)="onClickCategory(data)">
               <input [checked]="isCheckedCategory(data)" type="checkbox" value="" class="hidden peer">
diff --git a/src/app/shared/category-item/category-item.component.ts b/src/app/shared/category-item/category-item.component.ts
index 42f58df6..514f71db 100644
--- a/src/app/shared/category-item/category-item.component.ts
+++ b/src/app/shared/category-item/category-item.component.ts
@@ -160,5 +160,13 @@ export class CategoryItemComponent implements OnInit {
       }
     }
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
   
 }
\ No newline at end of file
diff --git a/src/app/shared/characteristic/characteristic.component.html b/src/app/shared/characteristic/characteristic.component.html
index 231ae9d1..779c2dc8 100644
--- a/src/app/shared/characteristic/characteristic.component.html
+++ b/src/app/shared/characteristic/characteristic.component.html
@@ -2,7 +2,10 @@
     <!-- Nombre y descripción -->
     <div class="my-2">
       <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ characteristic.name }}</h4>
-      <markdown class="text-gray-500 dark:text-gray-400 text-wrap break-all" [data]="characteristic.description"></markdown>
+      <markdown [ngClass]="{
+        'break-all': hasLongWord(characteristic.description, 20),
+        'break-words': !hasLongWord(characteristic.description, 20)
+        }" class="text-gray-500 dark:text-gray-400 text-wrap break-words" [data]="characteristic.description"></markdown>
     </div>
     @if(!isDisabled){
     <!-- Slider -->
diff --git a/src/app/shared/characteristic/characteristic.component.ts b/src/app/shared/characteristic/characteristic.component.ts
index 0ed4214c..3396f0b7 100644
--- a/src/app/shared/characteristic/characteristic.component.ts
+++ b/src/app/shared/characteristic/characteristic.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {NgForOf} from "@angular/common";
+import {NgForOf, NgClass} from "@angular/common";
 import {components} from "../../models/product-catalog";
 import {MarkdownComponent} from "ngx-markdown";
 import { certifications } from 'src/app/models/certification-standards.const';
@@ -26,6 +26,7 @@ interface Characteristic {
   standalone: true,
   imports: [
     NgForOf,
+    NgClass,
     ReactiveFormsModule,
     MarkdownComponent
   ],
@@ -84,4 +85,12 @@ export class CharacteristicComponent implements OnInit {
   getUnit(): string | undefined {
     return this.characteristic.productSpecCharacteristicValue?.[0].unitOfMeasure;
   }
+
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 }
diff --git a/src/app/shared/forms/markdown-textarea/markdown-textarea.component.html b/src/app/shared/forms/markdown-textarea/markdown-textarea.component.html
index 3a5a7092..202b7ca5 100644
--- a/src/app/shared/forms/markdown-textarea/markdown-textarea.component.html
+++ b/src/app/shared/forms/markdown-textarea/markdown-textarea.component.html
@@ -90,7 +90,10 @@
     <div class="relative px-4 py-2 bg-white dark:bg-secondary-300 rounded-b-lg">
       <label for="editor" class="sr-only">Publish post</label>
       @if(showPreview){
-        <markdown class="min-h-16 h-fit block bg-white text-wrap break-all dark:bg-secondary-300 dark:text-white text-gray-900"
+        <markdown [ngClass]="{
+          'break-all': hasLongWord(value, 20),
+          'break-words': !hasLongWord(value, 20)
+          }" class="min-h-16 h-fit block bg-white text-wrap break-words dark:bg-secondary-300 dark:text-white text-gray-900"
                   [data]="value"></markdown>
 
       }@else{
diff --git a/src/app/shared/forms/markdown-textarea/markdown-textarea.component.ts b/src/app/shared/forms/markdown-textarea/markdown-textarea.component.ts
index f66ee961..5dde69c6 100644
--- a/src/app/shared/forms/markdown-textarea/markdown-textarea.component.ts
+++ b/src/app/shared/forms/markdown-textarea/markdown-textarea.component.ts
@@ -146,4 +146,12 @@ export class MarkdownTextareaComponent implements ControlValueAccessor {
     }, 0);
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/shared/forms/offer/catalogue/catalogue.component.html b/src/app/shared/forms/offer/catalogue/catalogue.component.html
index 9dcc086c..491ce39c 100644
--- a/src/app/shared/forms/offer/catalogue/catalogue.component.html
+++ b/src/app/shared/forms/offer/catalogue/catalogue.component.html
@@ -51,7 +51,10 @@
                                 (click)="$event.stopPropagation(); toggleSelection(cat)">
                         </td>
 
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(cat.name, 20),
+                            'break-words': !hasLongWord(cat.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{cat.name}}
                         </td>
                         <td class="hidden md:table-cell px-6 py-4">
diff --git a/src/app/shared/forms/offer/catalogue/catalogue.component.ts b/src/app/shared/forms/offer/catalogue/catalogue.component.ts
index 07369dcd..18172f81 100644
--- a/src/app/shared/forms/offer/catalogue/catalogue.component.ts
+++ b/src/app/shared/forms/offer/catalogue/catalogue.component.ts
@@ -121,4 +121,12 @@ export class CatalogueComponent implements ControlValueAccessor, OnInit, AfterVi
       : "bg-white dark:bg-secondary-300";
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/shared/forms/offer/offer-summary/offer-summary.component.html b/src/app/shared/forms/offer/offer-summary/offer-summary.component.html
index dffe21b6..ca3e3143 100644
--- a/src/app/shared/forms/offer/offer-summary/offer-summary.component.html
+++ b/src/app/shared/forms/offer/offer-summary/offer-summary.component.html
@@ -2,14 +2,20 @@
     <div class="mb-4 grid grid-cols-2 gap-4">
         <div>
             <label class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._name' | translate }}</label>
-            <label class="mb-2 bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <label [ngClass]="{
+                'break-all': hasLongWord(productOfferForm.get('generalInfo.name')?.value, 20),
+                'break-words': !hasLongWord(productOfferForm.get('generalInfo.name')?.value, 20)
+                }" class="mb-2 bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                 {{ productOfferForm.get('generalInfo.name')?.value }}
             </label>
 
         </div>
        <div>
             <label for="prod-version" class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._version' | translate }}</label>
-            <label class="mb-2 bg-gray-50 text-wrap break-all border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <label [ngClass]="{
+                'break-all': hasLongWord(productOfferForm.get('generalInfo.version')?.value, 20),
+                'break-words': !hasLongWord(productOfferForm.get('generalInfo.version')?.value, 20)
+                }" class="mb-2 bg-gray-50 text-wrap break-words border border-gray-300 text-gray-900 dark:bg-secondary-300 dark:border-secondary-200 dark:text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                 {{ productOfferForm.get('generalInfo.version')?.value }}
             </label>
         </div>
@@ -31,7 +37,10 @@
    @if(productOfferForm.get('generalInfo.description')?.value !=''){
         <label class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._description' | translate }}</label>
         <div class="px-4 py-2 bg-white rounded-lg p-4 mb-4 dark:bg-secondary-300 dark:text-white border dark:border-secondary-200">
-            <markdown class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-all" [data]="productOfferForm.get('generalInfo.description')?.value"></markdown>
+            <markdown [ngClass]="{
+                'break-all': hasLongWord(productOfferForm.get('generalInfo.description')?.value, 20),
+                'break-words': !hasLongWord(productOfferForm.get('generalInfo.description')?.value, 20)
+                }" class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-words" [data]="productOfferForm.get('generalInfo.description')?.value"></markdown>
         </div>
     }
 <!--
@@ -92,7 +101,10 @@
             </thead>
             <tbody>
                 <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                    <td class="px-6 py-4 text-wrap break-all">
+                    <td [ngClass]="{
+                        'break-all': hasLongWord(productOfferForm.get('catalogue')?.value.name, 20),
+                        'break-words': !hasLongWord(productOfferForm.get('catalogue')?.value.name, 20)
+                        }" class="px-6 py-4 text-wrap break-words">
                         {{productOfferForm.get('catalogue')?.value.name}}
                     </td>
                     <td class="px-6 py-4">
@@ -132,7 +144,10 @@ <h2 class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._category' | tran
             <tbody>
                 @for (cat of productOfferForm.get('category')?.value; track cat.id) {
                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(cat.name, 20),
+                            'break-words': !hasLongWord(cat.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{cat.name}}
                         </td>
                         <td class="hidden md:table-cell px-6 py-4">
@@ -162,10 +177,16 @@ <h2 class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._price_plans' | t
             <tbody>
                 @for (price of productOfferForm.get('pricePlans')?.value; track price.id) {
                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 max-w-1/6 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(price.name, 20),
+                            'break-words': !hasLongWord(price.name, 20)
+                            }" class="px-6 py-4 max-w-1/6 text-wrap break-words">
                             {{price.name}}
                         </td>
-                        <td class="hidden md:table-cell px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(price.description, 20),
+                            'break-words': !hasLongWord(price.description, 20)
+                            }" class="hidden md:table-cell px-6 py-4 text-wrap break-words">
                             {{price.description}}
                         </td>
                     </tr>
@@ -221,13 +242,19 @@ <h2 class="font-bold text-lg">{{ 'CREATE_OFFER._sla' | translate }}</h2>
     <h2 class="font-bold text-lg dark:text-white">{{ 'CREATE_OFFER._license' | translate }}</h2>
     <div>
         <label for="treatment" class="font-bold text-base dark:text-white">{{ 'CREATE_OFFER._treatment' | translate }}</label>
-        <label class="mb-2 bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+        <label [ngClass]="{
+            'break-all': hasLongWord(productOfferForm.get('license')?.get('treatment')?.value, 20),
+            'break-words': !hasLongWord(productOfferForm.get('license')?.get('treatment')?.value, 20)
+            }" class="mb-2 bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
             {{productOfferForm.get('license')?.get('treatment')?.value}}
         </label>
         @if(productOfferForm.get('license')?.get('description')?.value!==''){
             <label class="font-bold text-base dark:text-white">{{ 'CREATE_OFFER._description' | translate }}</label>
             <div class="px-4 py-2 bg-gray-50 dark:bg-secondary-300 border border-gray-300 dark:border-secondary-200 dark:text-white rounded-lg p-4">
-                <markdown class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-all" [data]="productOfferForm.get('license')?.get('description')?.value"></markdown>
+                <markdown [ngClass]="{
+                    'break-all': hasLongWord(productOfferForm.get('license')?.get('description')?.value, 20),
+                    'break-words': !hasLongWord(productOfferForm.get('license')?.get('description')?.value, 20)
+                    }" class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-words" [data]="productOfferForm.get('license')?.get('description')?.value"></markdown>
             </div>
         }
     </div>
diff --git a/src/app/shared/forms/offer/offer-summary/offer-summary.component.ts b/src/app/shared/forms/offer/offer-summary/offer-summary.component.ts
index 6715f8a3..e4660d0c 100644
--- a/src/app/shared/forms/offer/offer-summary/offer-summary.component.ts
+++ b/src/app/shared/forms/offer/offer-summary/offer-summary.component.ts
@@ -52,6 +52,12 @@ export class OfferSummaryComponent implements OnInit {
     return !licenseValue || (typeof licenseValue === 'object' && Object.keys(licenseValue).length === 0);
   }
   
-  
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
 
 }
diff --git a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
index e660c2a7..649e0d3a 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
+++ b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.html
@@ -29,10 +29,16 @@
             <tbody>
                 @for (metric of metrics; track metric;) {
                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(metric.name, 20),
+                            'break-words': !hasLongWord(metric.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{metric.name}}
                         </td>
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(metric.description, 20),
+                            'break-words': !hasLongWord(metric.description, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{metric.description}}                                       
                         </td>
                         <td class="px-6 py-4">
diff --git a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.ts b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.ts
index 64a5fb9c..6c1a90c6 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.ts
+++ b/src/app/shared/forms/usage-spec/usage-spec-metrics/usage-spec-metrics.component.ts
@@ -156,4 +156,12 @@ export class UsageSpecMetricsComponent {
     }
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.html b/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.html
index e719bf4e..1f0c490e 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.html
+++ b/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.html
@@ -2,7 +2,10 @@
 
     <div  class="mb-4">
         <label class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._name' | translate }}</label>
-        <label class="mb-2 bg-gray-50 text-wrap break-all dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+        <label [ngClass]="{
+            'break-all': hasLongWord(usageSpecForm.get('generalInfo.name')?.value, 20),
+            'break-words': !hasLongWord(usageSpecForm.get('generalInfo.name')?.value, 20)
+            }" class="mb-2 bg-gray-50 text-wrap break-words dark:bg-secondary-300 dark:border-secondary-200 dark:text-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
             {{ usageSpecForm.get('generalInfo.name')?.value }}
         </label>
 
@@ -11,7 +14,10 @@
    @if(usageSpecForm.get('generalInfo.description')?.value !=''){
         <label class="font-bold text-lg dark:text-white">{{ 'USAGE_SPECS._description' | translate }}</label>
         <div class="px-4 py-2 bg-white rounded-lg p-4 mb-4 dark:bg-secondary-300 dark:text-white border dark:border-secondary-200">
-            <markdown class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-all" [data]="usageSpecForm.get('generalInfo.description')?.value"></markdown>
+            <markdown [ngClass]="{
+                'break-all': hasLongWord(usageSpecForm.get('generalInfo.description')?.value, 20),
+                'break-words': !hasLongWord(usageSpecForm.get('generalInfo.description')?.value, 20)
+                }" class="bg-gray-50 dark:bg-secondary-300 dark:text-white text-gray-900 text-wrap break-words" [data]="usageSpecForm.get('generalInfo.description')?.value"></markdown>
         </div>
     }
 
@@ -32,10 +38,16 @@
             <tbody>
                 @for (metric of usageSpecForm.get('metrics')?.value; track metric) {
                     <tr class="border-b hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
-                        <td class="px-6 py-4 text-wrap break-all">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(metric.name, 20),
+                            'break-words': !hasLongWord(metric.name, 20)
+                            }" class="px-6 py-4 text-wrap break-words">
                             {{metric.name}}
                         </td>
-                        <td class="hidden md:table-cell px-6 py-4">
+                        <td [ngClass]="{
+                            'break-all': hasLongWord(metric.description, 20),
+                            'break-words': !hasLongWord(metric.description, 20)
+                            }" class="hidden md:table-cell px-6 py-4 break-words">
                             {{metric.description}}
                         </td>
                     </tr>
diff --git a/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.ts b/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.ts
index 4c985e1a..29f5e463 100644
--- a/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.ts
+++ b/src/app/shared/forms/usage-spec/usage-spec-summary/usage-spec-summary.component.ts
@@ -43,4 +43,12 @@ export class UsageSpecSummaryComponent implements OnInit {
     console.log(this.usageSpecForm.get('metrics')?.value)
   }
 
+  hasLongWord(str: string | undefined, threshold = 20) {
+    if(str){
+      return str.split(/\s+/).some(word => word.length > threshold);
+    } else {
+      return false
+    }   
+  }
+
 }
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
index 0c65d5c6..a2d4d6e3 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.html
@@ -17,7 +17,10 @@
 
   <!-- Scrollable content -->
   <form [formGroup]="form" class="flex-1 p-4 overflow-y-auto">
-    <h5 id="drawer-right-label" class="inline-flex items-center text-wrap break-all mb-4 text-base font-semibold text-primary-100 dark:text-gray-400"><svg class="w-4 h-4 me-2.5 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <h5 id="drawer-right-label" [ngClass]="{
+      'break-all': hasLongWord(productOff?.name, 20),
+      'break-words': !hasLongWord(productOff?.name, 20)
+      }" class="inline-flex items-center text-wrap break-words mb-4 text-base font-semibold text-primary-100 dark:text-gray-400"><svg class="w-4 h-4 me-2.5 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
       <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
     </svg>Adding {{productOff?.name}} to cart</h5>
     <button type="button"
@@ -99,7 +102,10 @@ <h5 id="drawer-right-label" class="inline-flex items-center text-wrap break-all
       <div class="grid grid-cols-4 gap-2 mb-4">
         @for (metric of metrics || []; track metric.unitOfMeasure) {
           <div class="flex flex-col">
-            <h5 class="text-wrap break-all text-base text-primary-100 dark:text-gray-400">{{ metric.unitOfMeasure }}</h5>
+            <h5 [ngClass]="{
+              'break-all': hasLongWord(metric.unitOfMeasure, 20),
+              'break-words': !hasLongWord(metric.unitOfMeasure, 20)
+              }" class="text-wrap break-words text-base text-primary-100 dark:text-gray-400">{{ metric.unitOfMeasure }}</h5>
             <input
             type="number"
             (input)="onMetricChange($event, metric)"
@@ -114,9 +120,12 @@ <h5 class="text-wrap break-all text-base text-primary-100 dark:text-gray-400">{{
     }
     @if (form.get('selectedPricePlan')?.value && form.get('characteristics')?.valid && tsAndCs.description!='') {
       <div class="mb-6 text-sm text-gray-500 dark:text-gray-400">
-        <h5 class="text-wrap break-all text-base font-semibold text-primary-100 dark:text-gray-400">Terms and conditions:</h5>
+        <h5 class="text-wrap break-words text-base font-semibold text-primary-100 dark:text-gray-400">Terms and conditions:</h5>
         <div class="max-h-[300px] overflow-y-auto mb-2">
-        <markdown class="text-gray-500 dark:text-gray-400 text-wrap break-all" [data]="tsAndCs.description"></markdown>
+        <markdown [ngClass]="{
+          'break-all': hasLongWord(tsAndCs.description, 20),
+          'break-words': !hasLongWord(tsAndCs.description, 20)
+          }" class="text-gray-500 dark:text-gray-400 text-wrap break-words" [data]="tsAndCs.description"></markdown>
         </div>
         <div class="flex items-center">
           <input type="checkbox" id="tsAccepted" data-cy="acceptTermsCheckbox" class="mr-2" formControlName="tsAccepted">
diff --git a/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts b/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
index e41576af..827e2752 100644
--- a/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
+++ b/src/app/shared/price-plan-drawer/price-plan-drawer.component.ts
@@ -606,4 +606,5 @@ export class PricePlanDrawerComponent implements OnInit, OnDestroy {
       termsAccepted,
     };
   }
+  
 }