From 2320782f38395476a5bf0063d1018344cc14ead0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 2 Sep 2025 19:52:51 +0530
Subject: [PATCH] fix: UI issues with Instagram channel (#12355)

# Pull Request Template

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Before**
<img width="1129" height="862" alt="image"
src="https://github.com/user-attachments/assets/4752a3d9-bbe1-497f-9488-572c65768f7c"
/>


**After**
<img width="1129" height="862" alt="image"
src="https://github.com/user-attachments/assets/ec8d5194-f279-4d23-b6df-9e99fce74e69"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../routes/dashboard/settings/inbox/channels/Instagram.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
index 4577265a5..bf714e71b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue
@@ -62,9 +62,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="border border-n-weak bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
+  <div class="h-full p-6 w-full max-w-full flex-shrink-0 flex-grow-0">
     <div class="flex flex-col items-center justify-start h-full text-center">
       <div v-if="hasError" class="max-w-lg mx-auto text-center">
         <h5>{{ errorStateMessage }}</h5>
@@ -75,7 +73,7 @@ export default {
       </div>
       <div
         v-else
-        class="flex flex-col items-center justify-center px-8 py-10 text-center shadow rounded-3xl outline outline-1 outline-n-weak"
+        class="flex flex-col items-center justify-center px-8 py-10 text-center rounded-2xl outline outline-1 outline-n-weak"
       >
         <h6 class="text-2xl font-medium">
           {{ $t('INBOX_MGMT.ADD.INSTAGRAM.CONNECT_YOUR_INSTAGRAM_PROFILE') }}