Bugfix for overflow on long filenames with no spaces (#1349)

* Fixed Bug #403

. Fixed: Added word wrapping for long filenames with no spaces on headers that would cause info modal to overflow.

* Fixed Bug #403

. Fixed: Added word breaking for long filenames with no spaces which would cause volume info modal to overflow.

* Fixed Bug #403

Fixed: Added word breaking for long filenames with no spaces on headers, titles, and lists which would cause overflow.
Affected: Series Detail header, Edit Series modal title, and Volumes Info modal (View Files) modal.

* Removing some inline styles, moving style from global to component level

* whoops, forgot to remove inline

* Added word breaking and removed inline styles for headers

. Fixed: Card Detail, List Item

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -1,7 +1,7 @@
 
 <div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
     <div class="col me-auto">
-        <h2 style="display: inline-block">
+        <h2>
             <span *ngIf="actions.length > 0" class="">
                 <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>&nbsp;
             </span>

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss

@@ -86,3 +86,8 @@
   //background-color: red;
   //max-height: calc(var(--vh)*100 - 170px);
 }
+
+h2 {
+    display: inline-block;
+    word-break: break-all;
+}

UI/Web/src/app/cards/list-item/list-item.component.html

@@ -14,7 +14,7 @@
     </div>
     <div class="flex-grow-1">
         <div class="g-0">
-            <h5 style="margin-bottom: 0px">
+            <h5>
                 <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="seriesName" iconClass="fa-ellipsis-v"></app-card-actionables>
                 <ng-content select="[title]"></ng-content>
                 <button class="btn btn-primary float-end" (click)="read.emit()">
@@ -25,7 +25,7 @@
                 </button>
             </h5>
             <!-- This isn't perfect, but it might work. TODO: Polish this-->
-            <h6 class="text-muted" [ngClass]="{'subtitle-with-actionables' : actions.length > 0}" style="font-size: 0.75rem" *ngIf="Title != '' && showTitle">{{Title}}</h6>
+            <h6 class="text-muted" [ngClass]="{'subtitle-with-actionables' : actions.length > 0}" *ngIf="Title != '' && showTitle">{{Title}}</h6>
             <ng-container *ngIf="summary.length > 0">
                 <div class="mt-2 ps-2">
                     <app-read-more [text]="summary" [blur]="pagesRead === 0 && blur" [maxLength]="250"></app-read-more>

UI/Web/src/app/cards/list-item/list-item.component.scss

@@ -37,3 +37,12 @@ $triangle-size: 30px;
     border-width: 0 $triangle-size $triangle-size 0;
     border-color: transparent var(--primary-color) transparent transparent;
 }
+
+h5 {
+    margin-bottom: 0;
+}
+
+.subtitle-with-actionables {
+    font-size: 0.75rem;
+    word-break: break-all;
+ }

UI/Web/src/app/collections/collection-detail/collection-detail.component.html

@@ -1,7 +1,7 @@
 <div #companionBar>
     <app-side-nav-companion-bar *ngIf="series !== undefined" [hasFilter]="true" (filterOpen)="filterOpen.emit($event)" [filterActive]="filterActive">
         <ng-container title>
-            <h2 style="margin-bottom: 0px" *ngIf="collectionTag !== undefined">
+            <h2 *ngIf="collectionTag !== undefined">
                 <app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
                 {{collectionTag.title}}<span class="ms-1" *ngIf="collectionTag.promoted">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
             </h2>

UI/Web/src/app/collections/collection-detail/collection-detail.component.scss

@@ -36,3 +36,8 @@
   position: relative;
   overscroll-behavior-y: none;
 }
+
+h2 {
+  margin-bottom: 0;
+  word-break: break-all;
+}

UI/Web/src/app/series-detail/series-detail.component.html

@@ -1,7 +1,7 @@
 <div #companionBar>
     <app-side-nav-companion-bar *ngIf="series !== undefined" [hasExtras]="true" [extraDrawer]="extrasDrawer">
             <ng-container title>
-                <h2 style="margin-bottom: 0px">
+                <h2 class="title">
                     <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>

UI/Web/src/app/series-detail/series-detail.component.scss

@@ -27,3 +27,8 @@
   position: relative;
   overscroll-behavior-y: none;
 }
+
+.title, .subtitle-with-actionable {
+  word-break: break-all;
+  margin-bottom: 0;
+}

UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss

@@ -1,9 +1,3 @@
 .hide-if-empty:empty {
     display: none !important;
 }
-
-::ng-deep .companion-bar {
-    h1, h2, h3, h4, h5, h6 {
-        margin-bottom: 0px;
-    }
-}

UI/Web/src/theme/components/_list.scss

@@ -2,6 +2,7 @@
   color: var(--list-group-item-text-color);
   background-color: var(--list-group-item-bg-color);
   border-color: var(--list-group-item-border-color);
+  word-break: break-all;
 
   &:hover {
     color: var(--list-group-hover-text-color);

UI/Web/src/theme/components/_modal.scss

@@ -6,3 +6,7 @@
     background-color: var(--bs-body-bg);
     color: var(--body-text-color);
 }
+
+.modal-title {
+    word-break: break-all;
+}