fix: Email rendering issue with Google Drive link (#11069)

This commit is contained in:
Sivin Varghese
2025-03-12 14:36:17 +05:30
committed by GitHub
parent 5c05e45206
commit 15353ee779

View File

@@ -93,7 +93,7 @@ const hasQuotedMessage = computed(() => {
<template v-else>
<Letter
v-if="showQuotedMessage"
class-name="prose prose-bubble !max-w-none"
class-name="prose prose-bubble !max-w-none letter-render"
:allowed-css-properties="[
...allowedCssProperties,
'transform',
@@ -104,7 +104,7 @@ const hasQuotedMessage = computed(() => {
/>
<Letter
v-else
class-name="prose prose-bubble !max-w-none"
class-name="prose prose-bubble !max-w-none letter-render"
:html="unquotedHTML"
:allowed-css-properties="[
...allowedCssProperties,
@@ -143,3 +143,21 @@ const hasQuotedMessage = computed(() => {
</section>
</BaseBubble>
</template>
<style lang="scss">
// Tailwind resets break the rendering of google drive link in Gmail messages
// This fixes it using https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
.letter-render [class*='gmail_drive_chip'] {
box-sizing: initial;
@apply bg-n-slate-4 border-n-slate-6 rounded-md !important;
a {
@apply text-n-slate-12 !important;
img {
display: inline-block;
}
}
}
</style>