feat: better spacing

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

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

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">

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">

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

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"

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') }}

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>

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