fix: bubble UI issues (#10608)

This PR has fixes for the following issues

- Inconsistent spacing between meta and text in text bubble
- Activity bubble overflows for longer text (for now I have truncated
it, I'll work with @absurdiya on a better solution)
- Ugly lookinh gradient for expand button on email bubble
- Email bubble overflow issues and text rendering issues
- Alignment for error message
- Minute-wise grouping not working
- Link color should not be blue
- Use `gray-3` for bubble background instead of `gray-4`

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -48,59 +48,62 @@ const textToShow = computed(() => {
 </script>
 
 <template>
-  <BaseBubble class="w-full overflow-hidden" data-bubble-name="email">
-    <EmailMeta />
-    <section
-      ref="contentContainer"
-      class="p-4"
-      :class="{
-        'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
-      }"
-    >
+  <BaseBubble class="w-full" data-bubble-name="email">
+    <EmailMeta class="p-3" />
+    <section ref="contentContainer" class="p-3">
       <div
-        v-if="isExpandable && !isExpanded"
-        class="absolute left-0 right-0 bottom-0 h-40 p-8 flex items-end bg-gradient-to-t dark:from-[#24252b] from-[#F5F5F6] dark:via-[rgba(36,37,43,0.5)] via-[rgba(245,245,246,0.50)] dark:to-transparent to-[rgba(245,245,246,0.00)]"
+        :class="{
+          'max-h-[400px] overflow-hidden relative': !isExpanded && isExpandable,
+          'overflow-y-scroll relative': isExpanded,
+        }"
       >
-        <button
-          class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
-          @click="isExpanded = true"
+        <div
+          v-if="isExpandable && !isExpanded"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-gray-3 via-n-gray-3 via-20% to-transparent"
         >
-          <Icon icon="i-lucide-maximize-2" />
-          {{ $t('EMAIL_HEADER.EXPAND') }}
+          <button
+            class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
+            @click="isExpanded = true"
+          >
+            <Icon icon="i-lucide-maximize-2" />
+            {{ $t('EMAIL_HEADER.EXPAND') }}
+          </button>
+        </div>
+        <FormattedContent v-if="isOutgoing && content" :content="content" />
+        <template v-else>
+          <Letter
+            v-if="showQuotedMessage"
+            class-name="prose prose-email !max-w-none"
+            :html="fullHTML"
+            :text="textToShow"
+          />
+          <Letter
+            v-else
+            class-name="prose prose-email !max-w-none"
+            :html="unquotedHTML"
+            :text="textToShow"
+          />
+        </template>
+        <button
+          v-if="hasQuotedMessage"
+          class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
+          @click="showQuotedMessage = !showQuotedMessage"
+        >
+          <template v-if="showQuotedMessage">
+            {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
+          </template>
+          <template v-else>
+            {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
+          </template>
+          <Icon
+            :icon="
+              showQuotedMessage
+                ? 'i-lucide-chevron-up'
+                : 'i-lucide-chevron-down'
+            "
+          />
         </button>
       </div>
-      <FormattedContent v-if="isOutgoing && content" :content="content" />
-      <template v-else>
-        <Letter
-          v-if="showQuotedMessage"
-          class-name="prose prose-email !max-w-none"
-          :html="fullHTML"
-          :text="textToShow"
-        />
-        <Letter
-          v-else
-          class-name="prose prose-email !max-w-none"
-          :html="unquotedHTML"
-          :text="textToShow"
-        />
-      </template>
-      <button
-        v-if="hasQuotedMessage"
-        class="text-n-slate-11 px-1 leading-none text-sm bg-n-alpha-black2 text-center flex items-center gap-1 mt-2"
-        @click="showQuotedMessage = !showQuotedMessage"
-      >
-        <template v-if="showQuotedMessage">
-          {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
-        </template>
-        <template v-else>
-          {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
-        </template>
-        <Icon
-          :icon="
-            showQuotedMessage ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
-          "
-        />
-      </button>
     </section>
     <section v-if="attachments.length" class="px-4 pb-4 space-y-2">
       <AttachmentChips :attachments="attachments" class="gap-1" />