[FIX] Fix styling of overflowing titles

nck974 · Dec 3, 2023 · bbf1595 · bbf1595
1 parent 0d60942
commit bbf1595
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 8 deletions.
diff --git a/...enes/src/app/pages/categories/components/category-in-list/category-in-list.component.html b/...enes/src/app/pages/categories/components/category-in-list/category-in-list.component.html
@@ -6,7 +6,9 @@
 
             <mat-card-title class="show-pointer" (click)="onOpenDetails()"
                 title="{{category.description}}">
-                {{ category.name }}
+                <span class="no-overflow-everywhere">
+                    {{ category.name }}
+                </span>
             </mat-card-title>
 
             <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>

diff --git a/ng-diogenes/src/app/pages/category-detail/category-detail.component.html b/ng-diogenes/src/app/pages/category-detail/category-detail.component.html
@@ -17,7 +17,9 @@
             <!-- Header -->
             <mat-card-header>
                 <mat-card-title>
-                    {{ category.name }}
+                    <span class="no-overflow-everywhere">
+                        {{ category.name }}
+                    </span>
                 </mat-card-title>
 
                 <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>

diff --git a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
@@ -1,15 +1,16 @@
 <div class="card-wrapper flex-center">
 
     <!-- Card -->
-    <mat-card class="material-card-element-no-padding card-with-hover-effect" *ngIf="item">
+    <mat-card class="material-card-element-no-padding card-with-hover-effect"
+        *ngIf="item">
 
         <!-- header -->
         <mat-card-header>
-            
+
             <!-- Title -->
             <mat-card-title class="show-pointer" (click)="onOpenDetails()"
                 title="{{item.description}}">
-                {{ item.name }}
+                <span class="no-overflow-everywhere">{{ item.name }}</span>
             </mat-card-title>
 
             <!-- Details -->
@@ -28,7 +29,7 @@
                 </span>
 
             </mat-card-subtitle>
-            
+
             <!-- Category -->
             <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
 

diff --git a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
@@ -17,7 +17,9 @@
             <!-- Header -->
             <mat-card-header>
                 <mat-card-title>
-                    {{ item.name }}
+                    <span class="no-overflow-everywhere">
+                        {{ item.name }}
+                    </span>
                 </mat-card-title>
 
                 <mat-card-subtitle>
@@ -38,7 +40,7 @@
                         class="item-image"
                         alt="item-image">
                 </div>
-                
+
                 <!-- Description -->
                 <p class="item-description no-overflow" *ngIf="item.description">
                     {{ item.description }}

diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
@@ -37,6 +37,10 @@
     word-wrap: break-word;
 }
 
+.no-overflow-everywhere {
+    word-wrap: anywhere;
+}
+
 .vertical-align-image {
     vertical-align: middle;
 }