FIX break-words in every place for words smaller than 20 chars if not the break-all

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>
      }

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
+    }   
+  }
+
 }

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 }}

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
+    }   
+  }
 }

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">

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
+    }   
+  }
 }

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>

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>

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
+    }   
+  }
+
 }

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)" 

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
+    }   
+  }
 }

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">

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
+    }   
+  }
+
 }