Series title word wrapping (#1519)

* 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

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

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>

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