diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/popoverContent.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/popoverContent.svelte
index 7b9a1e723..335b3bc28 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/popoverContent.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/popoverContent.svelte
@@ -1,21 +1,28 @@
 <script lang="ts">
     import { ImagePreview } from '$lib/components';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let lines = [];
     export let image: { src: { dark: string; light: string }; alt: string } | null = null;
 </script>
 
-<div class="u-flex-vertical u-gap-16">
+<div class="u-flex-vertical u-gap-16 popover-content">
     {#each lines as line}
         <p>{@html line}</p>
     {/each}
 
     {#if image}
-        <ImagePreview darkSrc={image.src.dark} lightSrc={image.src.light} alt={image.alt} />
+        <Layout.Stack class="image-wrapper">
+            <ImagePreview darkSrc={image.src.dark} lightSrc={image.src.light} alt={image.alt} />
+        </Layout.Stack>
     {/if}
 </div>
 
 <style>
+    .popover-content {
+        max-inline-size: 260px;
+    }
+
     div > p {
         color: hsl(var(--color-neutral-50));