toast max-width

app/assets/stylesheets/toastify.css

@@ -1,10 +1,9 @@
 .toastify {
-  display: inline-block;
   position: fixed;
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   cursor: pointer;
-  max-width: calc(50% - 20px);
+  max-width: inherit;
   z-index: 1000;
 }
 
@@ -40,8 +39,6 @@
   margin-right: auto;
   left: 0;
   right: 0;
-  max-width: fit-content;
-  max-width: -moz-fit-content;
 }
 
 @media only screen and (max-width: 360px) {

app/javascript/controllers/flash_controller.js

@@ -1,25 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
 import Toastify from 'toastify-js'
 
-// Connects to data-controller="flash"
 export default class extends Controller {
 
-  count = 0
+  count = 1
 
   connect() {
     console.log('FLASH stimulus ready!')
   }
 
   notice() {
-    console.warn('show notice')
+    const message = `
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current mx-4" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <div>
+      This <i>is</i> toast #${this.count++} + a long message which should wrap over 2 or more lines.<br/>
+      lorem ipsum lorem ipsume lorem ipsum lorem ipsume<br>
+       lorem ipsum lorem ipsume
+      </div>
+    `
+    console.warn(Toastify.defaults.selector)
+    console.info(message)
     Toastify({
-      text: `This is toast #${this.count++} + a long message which should wrap over 2 or more lines`,
+      selector: 'flash-container',
+      text: message,
+      escapeMarkup: false,
       className: 'alert alert-success inset-ring-2 shadow-xl/30',
       close: true,
       position: 'center',
       // gravity: "top", // `top` or `bottom`
       // stopOnFocus: true, // Prevents dismissing of toast on hover
       // duration: 3000,
+      // duration: 0,
       offset: {
         // x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
         y: 30 // vertical axis - can be a number or a string indicating unity. eg: '2em'

app/views/layouts/components/_flash.html.erb

@@ -1,6 +1,15 @@
+<div id='flash-container' style='max-width: calc(50% - 20px)'>
+  <!-- 
+  here is a shadow root which serves as a placeholder for the toaster area.
+  max-width gets inherited from this node.
+  -->
+</div>
+
 <footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
   <aside>
-    <p>Copyleft AGPLv3</p>
+    <%= Rails.application.name.upcase %> app is free software<br/>
+    Copyleft: AGPLv3<br/>
+    source code<br/>
   </aside>
 
   <aside data-controller="flash"

app/views/notification/index.html.erb

@@ -17,12 +17,18 @@
   </ul>
 </div>
 
-<div role="alert" class="alert alert-success inset-ring-2">
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-  <span>Your purchase has been confirmed!</span>
-</div>
+<section class='w-full max-w-96'>
+  <div role="alert" class="alert alert-success inset-ring-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <div>
+      Your purchase has been confirmed!<br/>
+      Your purchase has been confirmed!<br/>
+      Your purchase has been confirmed!<br/>
+    </div>
+  </div>
+</section>
 
 <div>
   <h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>