From aad480d83c66d4c4a32bf3c522cd31756f53ba6f Mon Sep 17 00:00:00 2001
From: Ocgineer <rvanbeek1@gmail.com>
Date: Fri, 23 Sep 2022 00:52:44 +0200
Subject: [PATCH] Series title word wrapping (#1519)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added text-break class to series title.

Simply added the class text-break from bootstrap to break on words.
https://getbootstrap.com/docs/5.0/utilities/text/#word-break

This has no issue with languages that do not or rarely use spaces, such as japanese and chinese. Used the following two series names to test;
- 今まで一度も女扱いされたことがない女騎士を女扱いする漫画
- Imamade Ichido mo Onnaatsukai sareta Koto ga Nai Onna Kishi wo Onnaatsukai suru

* Added text-break class to localized title

Also added the text-break bootstrap class to the localized title, removed the word-break rule from css as it is redundant.

* Enclosed LibraryName with span

Enclosed {{libraryName}} with a span to remove the added space before the title, aligning it again with the start of the subtitle. This mimics series-detail-component.html
---
 UI/Web/src/app/library-detail/library-detail.component.html | 2 +-
 UI/Web/src/app/series-detail/series-detail.component.html   | 4 ++--
 UI/Web/src/app/series-detail/series-detail.component.scss   | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/UI/Web/src/app/library-detail/library-detail.component.html b/UI/Web/src/app/library-detail/library-detail.component.html
index c3e70a238..19478898a 100644
--- a/UI/Web/src/app/library-detail/library-detail.component.html
+++ b/UI/Web/src/app/library-detail/library-detail.component.html
@@ -1,7 +1,7 @@
 <app-side-nav-companion-bar [hasFilter]="true" [filterOpenByDefault]="filterSettings.openByDefault" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
     <h2 title>
         <app-card-actionables [actions]="actions" (actionHandler)="performAction($event)"></app-card-actionables>
-        {{libraryName}}
+        <span>{{libraryName}}</span>
     </h2>
     <h6 subtitle class="subtitle-with-actionables" *ngIf="active.fragment === ''">{{pagination.totalItems}} Series</h6>
     <div main>
diff --git a/UI/Web/src/app/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/series-detail.component.html
index e43fcbd76..838b88d11 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/series-detail.component.html
@@ -1,13 +1,13 @@
 <div #companionBar>
     <app-side-nav-companion-bar *ngIf="series !== undefined" [hasExtras]="true" [extraDrawer]="extrasDrawer">
             <ng-container title>
-                <h2 class="title">
+                <h2 class="title text-break">
                     <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables>
                     <span>{{series.name}}</span>
                 </h2>
             </ng-container>
             <ng-container subtitle *ngIf="series.localizedName !== series.name">
-                <h6 class="subtitle-with-actionables" title="Localized Name">{{series.localizedName}}</h6>
+                <h6 class="subtitle-with-actionables text-break" title="Localized Name">{{series.localizedName}}</h6>
             </ng-container>
 
             <ng-template #extrasDrawer let-offcanvas>
diff --git a/UI/Web/src/app/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/series-detail.component.scss
index f4dbbb5b6..013005d49 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.scss
+++ b/UI/Web/src/app/series-detail/series-detail.component.scss
@@ -29,7 +29,6 @@
 }
 
 .title, .subtitle-with-actionable {
-  word-break: break-all;
   margin-bottom: 0;
 }