fix: 1.0.8 change handling for large toast bodies

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+##### 1.0.8
+
+- Changed handling of large toast bodies. This should address [#54](https://github.com/scenius-software/angular-toastify/issues/54).
+
 ##### 1.0.7
 
 - Added auto close overrides per toast type. See [!57](https://github.com/scenius-software/angular-toastify/pull/53). Credits go to [@MaxvandenHout](https://github.com/MaxvandenHout) for implementing this feature.

README.md

@@ -73,6 +73,10 @@ Add to component or service:
 
 # Changelog
 
+##### 1.0.8
+
+- Changed handling of large toast bodies. This should address [#54](https://github.com/scenius-software/angular-toastify/issues/54).
+
 ##### 1.0.7
 
 - Added auto close overrides per toast type. See [!57](https://github.com/scenius-software/angular-toastify/pull/53). Credits go to [@MaxvandenHout](https://github.com/MaxvandenHout) for implementing this feature.

projects/angular-toastify/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-toastify",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Somewhat working clone of React Toastify.",
   "author": "Scenius",
   "repository": {

projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html

@@ -1,7 +1,7 @@
 <div class="toast-container toast-container--{{position}}">
-    <lib-toastify-toast *ngFor="let toast of toasts" [class]="getClass(toast)" style="animation-fill-mode: both; animation-duration: 0.75s"
-        [autoClose]="autoClose" [autoCloseSuccess]="this.autoCloseSuccess" [autoCloseError]="this.autoCloseError" [autoCloseWarn]="this.autoCloseWarn" 
+    <lib-toastify-toast *ngFor="let toast of toasts" [class]="getClass(toast)" style="animation-fill-mode: both; animation-duration: 0.75s; flex-direction: column;"
+        [autoClose]="autoClose" [autoCloseSuccess]="this.autoCloseSuccess" [autoCloseError]="this.autoCloseError" [autoCloseWarn]="this.autoCloseWarn"
         [autoCloseInfo]="this.autoCloseInfo" [toast]="toast" (dismissEvent)="dismiss(toast)" [hideProgressBar]="hideProgressBar" [pauseOnHover]="pauseOnHover"
         [pauseOnVisibilityChange]="pauseOnVisibilityChange" [closeOnClick]="closeOnClick" [iconLibrary]="iconLibrary">
     </lib-toastify-toast>
-</div>
+</div>

projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html

@@ -16,10 +16,12 @@
         </span>
     </div>
     <div class="toast-container">
-        <span>{{toast.message}}</span>
+        <div>{{toast.message}}</div>
+    </div>
+    <div class="close-container">
+      <button (click)="handleDismissButtonAction()" class="close-button close-button--{{ToastType[toast.type]}}" type="button" aria-label="close">✖</button>
     </div>
 </div>
-<button (click)="handleDismissButtonAction()" class="close-button close-button--{{ToastType[toast.type]}}" type="button" aria-label="close">✖</button>
 
 <div #progressBar *ngIf="!hideProgressBar" class="progress-bar progress-bar&#45;&#45;{{ToastType[toast.type]}}" style="opacity: 1;"></div>
 <div #progressBarCover *ngIf="!hideProgressBar" class="progress-bar-cover toast--{{ToastType[toast.type]}}" [style.animation-duration]="this.autoCloseAfterSpecificChange() + 'ms'"  [style.animation-play-state]="running? 'running' : 'paused'"></div>

projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.scss

@@ -10,11 +10,16 @@
 /* Separate React Toastify TM styling from new styling in order upgrade them separately */
 
 .toast-body {
+    min-width: 0;
+    min-height: 0;
     vertical-align: middle;
+    display: flex;
 }
 
 .icon-container {
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     width: 25px;
     vertical-align: middle;
 
@@ -36,7 +41,16 @@
 }
 
 .toast-container {
-    display: inline-block;
     width: calc(100% - 25px);
-    vertical-align: middle;
-}
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+  > div {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
+}

projects/angular-toastify/src/styles/_toastContainer.scss

@@ -1,4 +1,5 @@
 .toast-container {
+    word-break: break-word;
     z-index: $rt-z-index;
     -webkit-transform: translate3d(0, 0, #{$rt-z-index}px);
     position: fixed;