diff --git a/src/routes/(console)/project-[project]/messaging/pushPhone.svelte b/src/routes/(console)/project-[project]/messaging/pushPhone.svelte
index a6fb893f7..758982e65 100644
--- a/src/routes/(console)/project-[project]/messaging/pushPhone.svelte
+++ b/src/routes/(console)/project-[project]/messaging/pushPhone.svelte
@@ -18,7 +18,7 @@
         </div>
         <div>
             <p class="body-text-1 u-small u-bold">{title || 'Message Title'}</p>
-            <p class="body-text-2 u-x-small">
+            <p class="notification-bubble body-text-2 u-x-small">
                 {body || 'Enter your message in the input field on the left to see it here'}
             </p>
         </div>
@@ -49,6 +49,15 @@
         }
     }
 
+    .notification-bubble {
+        overflow: hidden;
+        display: -webkit-box;
+        line-clamp: 4;
+        word-break: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+    }
+
     :global(.theme-dark) .phone {
         background-image: url('./push-notification-preview-dark.svg');
 
diff --git a/src/routes/(console)/project-[project]/messaging/smsPhone.svelte b/src/routes/(console)/project-[project]/messaging/smsPhone.svelte
index 63526c264..4561d8614 100644
--- a/src/routes/(console)/project-[project]/messaging/smsPhone.svelte
+++ b/src/routes/(console)/project-[project]/messaging/smsPhone.svelte
@@ -92,6 +92,12 @@
                     padding-block: 7px;
                     margin-inline-start: 6px;
                     margin-inline-end: 33px;
+                    overflow: hidden;
+                    display: -webkit-box;
+                    word-break: break-word;
+                    line-clamp: 4;
+                    -webkit-line-clamp: 4;
+                    -webkit-box-orient: vertical;
                 }
             }
         }