From b727d119f149d340fa49b9d325d0919c76327373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcelo=20Guimar=C3=A3es=20Junior?=
 <75567460+magujun@users.noreply.github.com>
Date: Tue, 12 Jul 2022 05:58:42 -0700
Subject: [PATCH] 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>
---
 .../card-detail-layout.component.html                 |  2 +-
 .../card-detail-layout.component.scss                 |  5 +++++
 .../src/app/cards/list-item/list-item.component.html  |  4 ++--
 .../src/app/cards/list-item/list-item.component.scss  | 11 ++++++++++-
 .../collection-detail.component.html                  |  2 +-
 .../collection-detail.component.scss                  |  7 ++++++-
 .../app/series-detail/series-detail.component.html    |  2 +-
 .../app/series-detail/series-detail.component.scss    |  5 +++++
 .../side-nav-companion-bar.component.scss             |  6 ------
 UI/Web/src/theme/components/_list.scss                |  1 +
 UI/Web/src/theme/components/_modal.scss               |  6 +++++-
 11 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
index 7bc9cc543..a8425b47a 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/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>
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
index d8830f155..a4c9473d2 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/UI/Web/src/app/cards/list-item/list-item.component.html b/UI/Web/src/app/cards/list-item/list-item.component.html
index 2c3b846fd..f9b393030 100644
--- a/UI/Web/src/app/cards/list-item/list-item.component.html
+++ b/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>
diff --git a/UI/Web/src/app/cards/list-item/list-item.component.scss b/UI/Web/src/app/cards/list-item/list-item.component.scss
index c4453d519..6701a296f 100644
--- a/UI/Web/src/app/cards/list-item/list-item.component.scss
+++ b/UI/Web/src/app/cards/list-item/list-item.component.scss
@@ -36,4 +36,13 @@ $triangle-size: 30px;
     border-style: solid;
     border-width: 0 $triangle-size $triangle-size 0;
     border-color: transparent var(--primary-color) transparent transparent;
-}
\ No newline at end of file
+}
+
+h5 {
+    margin-bottom: 0;
+}
+
+.subtitle-with-actionables {
+    font-size: 0.75rem;
+    word-break: break-all;
+ }
\ No newline at end of file
diff --git a/UI/Web/src/app/collections/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/collection-detail/collection-detail.component.html
index 3f1e5f84a..0b75795b3 100644
--- a/UI/Web/src/app/collections/collection-detail/collection-detail.component.html
+++ b/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>
diff --git a/UI/Web/src/app/collections/collection-detail/collection-detail.component.scss b/UI/Web/src/app/collections/collection-detail/collection-detail.component.scss
index 196c98dd9..a262f9e46 100644
--- a/UI/Web/src/app/collections/collection-detail/collection-detail.component.scss
+++ b/UI/Web/src/app/collections/collection-detail/collection-detail.component.scss
@@ -35,4 +35,9 @@
   overflow-y: auto;
   position: relative;
   overscroll-behavior-y: none;
-}
\ No newline at end of file
+}
+
+h2 {
+  margin-bottom: 0;
+  word-break: break-all;
+}
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 28ab165bd..85203f0a3 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.html
+++ b/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>
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 36e3660f7..cb19ae6fe 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.scss
+++ b/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;
+}
diff --git a/UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss b/UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss
index 6b20aa117..60cc4989f 100644
--- a/UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss
+++ b/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;
-    }
-}
\ No newline at end of file
diff --git a/UI/Web/src/theme/components/_list.scss b/UI/Web/src/theme/components/_list.scss
index 09ebdd08b..cbfe5ce30 100644
--- a/UI/Web/src/theme/components/_list.scss
+++ b/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);
diff --git a/UI/Web/src/theme/components/_modal.scss b/UI/Web/src/theme/components/_modal.scss
index d68d4274c..ede9e7030 100644
--- a/UI/Web/src/theme/components/_modal.scss
+++ b/UI/Web/src/theme/components/_modal.scss
@@ -5,4 +5,8 @@
 .modal-content {
     background-color: var(--bs-body-bg);
     color: var(--body-text-color);
-}
\ No newline at end of file
+}
+
+.modal-title {
+    word-break: break-all;
+}