diff --git a/app/components/toast.hbs b/app/components/toast.hbs
index b30487e..f78c633 100644
--- a/app/components/toast.hbs
+++ b/app/components/toast.hbs
@@ -2,7 +2,7 @@
   <div
     class='flex items-center p-4 w-full max-w-xs border rounded shadow-sm'
     role='alert'
-    {{did-insert this.registerInQueue}}
+    {{did-insert this.didInsert}}
   >
     {{yield (hash triggerOnClose=this.triggerOnClose)}}
   </div>
diff --git a/app/components/toast.js b/app/components/toast.js
index 4005348..0059650 100644
--- a/app/components/toast.js
+++ b/app/components/toast.js
@@ -2,16 +2,40 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class ToastComponent extends Component {
   @service toasts;
 
+  @tracked width;
+  @tracked height;
+
   @action
   triggerOnClose() {
     this.args.onClose?.();
   }
 
   @action
+  didInsert(el) {
+    this.registerInQueue();
+    this.registerResizeObserver(el);
+  }
+
+  registerResizeObserver(el) {
+    const ro = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        this.width = entry.contentRect.width;
+        this.height = entry.contentRect.height;
+      }
+    });
+
+    ro.observe(el);
+
+    registerDestructor(this, () => {
+      ro.disconnect();
+    });
+  }
+
   registerInQueue() {
     this.toasts.add(this);