From c8ade357d7c5c613319630cf00be8ea2ee257dd3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 1 Dec 2025 16:21:31 +0530
Subject: [PATCH] feat: better spacing

---
 app/javascript/dashboard/assets/scss/_next-colors.scss       | 3 ++-
 .../components-next/message/bubbles/BaseAttachment.vue       | 5 ++++-
 .../dashboard/components-next/message/bubbles/CSAT.vue       | 5 ++++-
 .../dashboard/components-next/message/bubbles/Form.vue       | 5 ++++-
 .../dashboard/components-next/message/bubbles/Image.vue      | 2 +-
 .../components-next/message/bubbles/InstagramStory.vue       | 5 ++++-
 .../dashboard/components-next/message/bubbles/Text/Index.vue | 5 ++++-
 .../components-next/message/bubbles/Unsupported.vue          | 5 ++++-
 .../dashboard/components-next/message/bubbles/Video.vue      | 2 +-
 9 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
index e1e6e80216f..3bc13573fe1 100644
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -275,7 +275,8 @@
     --bubble-radius-sm: calc(0.125rem * var(--bubble-spacing-ratio));
     --bubble-radius-md: calc(0.375rem * var(--bubble-spacing-ratio));
     --bubble-radius-lg: calc(0.5rem * var(--bubble-spacing-ratio));
-    --bubble-padding: calc(0.75rem * var(--bubble-spacing-ratio));
+    --bubble-padding-x: calc(1rem * var(--bubble-spacing-ratio));
+    --bubble-padding-y: calc(0.75rem * var(--bubble-spacing-ratio));
 
     // Bubble meta text colors (per variant)
     --bubble-agent-meta: var(--slate-11);
diff --git a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
index a573e78683f..11ed3dc0a73 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/BaseAttachment.vue
@@ -29,7 +29,10 @@ const senderName = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
+  <BaseBubble
+    class="overflow-hidden p-[var(--bubble-padding-y)]"
+    data-bubble-name="attachment"
+  >
     <div class="grid gap-4 min-w-64">
       <div class="grid gap-3">
         <div
diff --git a/app/javascript/dashboard/components-next/message/bubbles/CSAT.vue b/app/javascript/dashboard/components-next/message/bubbles/CSAT.vue
index 6f86bd86826..27bd7a4a49d 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/CSAT.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/CSAT.vue
@@ -40,7 +40,10 @@ const starRatingValue = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+  <BaseBubble
+    class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)]"
+    data-bubble-name="csat"
+  >
     <h4>{{ content || t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
     <dl v-if="isRatingSubmitted" class="mt-4">
       <dt class="text-n-slate-11 italic">
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Form.vue b/app/javascript/dashboard/components-next/message/bubbles/Form.vue
index 12cfafa8ff9..3d3fa587812 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Form.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Form.vue
@@ -48,7 +48,10 @@ const formValues = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+  <BaseBubble
+    class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)]"
+    data-bubble-name="form"
+  >
     <span v-dompurify-html="content" :title="content" />
     <dl v-if="formValues.length" class="mt-4">
       <template v-for="item in formValues" :key="item.title">
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Image.vue b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
index 03aed39d272..84a294e8982 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Image.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Image.vue
@@ -51,7 +51,7 @@ const handleImageError = () => {
 
 <template>
   <BaseBubble
-    class="overflow-hidden p-3"
+    class="overflow-hidden p-[var(--bubble-padding-y)]"
     data-bubble-name="image"
     @click="toggleGallery(true)"
   >
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
index f167d650171..4c374075561 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -37,7 +37,10 @@ const onVideoLoadError = () => {
 </script>
 
 <template>
-  <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
+  <BaseBubble
+    class="p-[var(--bubble-padding-y)] overflow-hidden"
+    data-bubble-name="ig-story"
+  >
     <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
index 06fb8be4847..40b2e1fb269 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text/Index.vue
@@ -42,7 +42,10 @@ const handleSeeOriginal = () => {
 </script>
 
 <template>
-  <BaseBubble class="px-4 py-3" data-bubble-name="text">
+  <BaseBubble
+    class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)]"
+    data-bubble-name="text"
+  >
     <div class="gap-3 flex flex-col">
       <span v-if="isEmpty" class="text-n-slate-11">
         {{ $t('CONVERSATION.NO_CONTENT') }}
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
index 5268cb02c96..e2ba45d7a31 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -3,7 +3,10 @@ import BaseBubble from './Base.vue';
 </script>
 
 <template>
-  <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
+  <BaseBubble
+    class="px-[var(--bubble-padding-x)] py-[var(--bubble-padding-y)] text-sm"
+    data-bubble-name="unsupported"
+  >
     {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Video.vue b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
index 28b61b95aa1..f56fc66dea4 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Video.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Video.vue
@@ -29,7 +29,7 @@ const isReel = computed(() => {
 
 <template>
   <BaseBubble
-    class="overflow-hidden p-3"
+    class="overflow-hidden p-[var(--bubble-padding-y)]"
     data-bubble-name="video"
     @click="toggleGallery(true)"
   >