Add positional observer

app/components/toast.hbs

@@ -1,8 +1,10 @@
 {{#in-element this.toasts.destinationElement insertBefore=null}}
   <div
-    class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
+    class='absolute flex items-center p-4 w-full max-w-xs border rounded bg-base-7 shadow-sm'
     role='alert'
+    style={{this.style}}
     {{did-insert this.didInsert}}
+    ...attributes
   >
     {{yield (hash triggerOnClose=this.triggerOnClose)}}
   </div>

app/components/toast.js

@@ -3,6 +3,9 @@ import { inject as service } from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+
+const margin = 16;
 
 export default class ToastComponent extends Component {
   @service toasts;
@@ -10,6 +13,30 @@ export default class ToastComponent extends Component {
   @tracked width;
   @tracked height;
 
+  get top() {
+    const queue = this.toasts.queue;
+
+    for (let i = 0, height = 0; i < queue.length; i++) {
+      height += margin;
+
+      if (queue[i] === this) {
+        return `top: ${height}px`;
+      }
+
+      height += queue[i].height;
+    }
+
+    return `top: ${margin}px`;
+  }
+
+  get right() {
+    return `right: ${margin}px`;
+  }
+
+  get style() {
+    return htmlSafe([this.top, this.right].join('; '));
+  }
+
   @action
   triggerOnClose() {
     this.args.onClose?.();
@@ -23,10 +50,8 @@ export default class ToastComponent extends Component {
 
   registerResizeObserver(el) {
     const ro = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        this.width = entry.contentRect.width;
-        this.height = entry.contentRect.height;
-      }
+      this.width = entries[0].borderBoxSize[0].inlineSize;
+      this.height = entries[0].borderBoxSize[0].blockSize;
     });
 
     ro.observe(el);

app/services/toasts.js

@@ -1,8 +1,7 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
-import SuccessToast from '../components/success-toast';
 import { hbs } from 'ember-template-imports';
-import { fn } from '@ember/helper';
+import SuccessToast from '../components/success-toast';
 
 export default class ToastsService extends Service {
   @tracked container = [];