From 8a9efc1457ebf094082307c4b49876f1d0d0db92 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 30 Sep 2025 19:37:29 +0530
Subject: [PATCH] fixed the width of provider popup

---
 .../messaging/providers/popoverContent.svelte         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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));