From cd0af9900246c0a388ec89667882e3c481786fc8 Mon Sep 17 00:00:00 2001
From: Willem <willem.sporen@scenius.nl>
Date: Thu, 26 Sep 2024 08:59:56 +0200
Subject: [PATCH] fix: 1.0.8 change handling for large toast bodies

---
 CHANGELOG.md                                  |  4 ++++
 README.md                                     |  4 ++++
 projects/angular-toastify/package.json        |  2 +-
 .../toastify-toast-container.component.html   |  6 ++---
 .../toastify-toast.component.html             |  6 +++--
 .../toastify-toast.component.scss             | 22 +++++++++++++++----
 .../src/styles/_toastContainer.scss           |  1 +
 7 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c008cc..c91ae61 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/README.md b/README.md
index 74c61c4..f99a3f5 100644
--- a/README.md
+++ b/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.
diff --git a/projects/angular-toastify/package.json b/projects/angular-toastify/package.json
index 3f55b75..2ca1bec 100644
--- a/projects/angular-toastify/package.json
+++ b/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": {
diff --git a/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html b/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html
index dd7804f..a3cd1fc 100644
--- a/projects/angular-toastify/src/lib/toastify-toast-container/toastify-toast-container.component.html
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html b/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html
index 2c86697..538c88a 100644
--- a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.html
+++ b/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>
diff --git a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.scss b/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.scss
index d3a3727..4d8eba3 100644
--- a/projects/angular-toastify/src/lib/toastify-toast/toastify-toast.component.scss
+++ b/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;
-}
\ No newline at end of file
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+  > div {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
diff --git a/projects/angular-toastify/src/styles/_toastContainer.scss b/projects/angular-toastify/src/styles/_toastContainer.scss
index 0a0c50c..4e9bf93 100644
--- a/projects/angular-toastify/src/styles/_toastContainer.scss
+++ b/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;