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> <template v-else>
<Letter <Letter
v-if="showQuotedMessage" v-if="showQuotedMessage"
class-name="prose prose-bubble !max-w-none" class-name="prose prose-bubble !max-w-none letter-render"
:allowed-css-properties="[ :allowed-css-properties="[
...allowedCssProperties, ...allowedCssProperties,
'transform', 'transform',
@@ -104,7 +104,7 @@ const hasQuotedMessage = computed(() => {
/> />
<Letter <Letter
v-else v-else
class-name="prose prose-bubble !max-w-none" class-name="prose prose-bubble !max-w-none letter-render"
:html="unquotedHTML" :html="unquotedHTML"
:allowed-css-properties="[ :allowed-css-properties="[
...allowedCssProperties, ...allowedCssProperties,
@@ -143,3 +143,21 @@ const hasQuotedMessage = computed(() => {
</section> </section>
</BaseBubble> </BaseBubble>
</template> </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>