From 290657c9de723606c3300e45a33e3270ce2b86c6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 30 May 2024 16:59:59 +0530
Subject: [PATCH] fix: stop css bleeding from email content

---
 frontend/src/components/Activities.vue   |  82 +----------------
 frontend/src/components/EmailContent.vue | 108 +++++++++++++++++++++++
 2 files changed, 110 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/EmailContent.vue
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 9e8a2b31..4beec830 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -523,11 +523,7 @@
             </span>
             <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
           </div>
-          <FadedScrollableDiv
-            :maskHeight="30"
-            class="email-content prose-f max-h-[500px] overflow-y-auto"
-            v-html="activity.data.content"
-          />
+          <EmailContent :content="activity.data.content" />
           <div class="flex flex-wrap gap-2">
             <AttachmentItem
               v-for="a in activity.data.attachments"
@@ -886,6 +882,7 @@
   />
 </template>
 <script setup>
+import EmailContent from '@/components/EmailContent.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
@@ -1399,79 +1396,4 @@ nextTick(() => {
 .audio-control::-webkit-media-controls-panel {
   background-color: white;
 }
-
-/* email content */
-
-.email-content {
-  word-break: break-word;
-}
-:deep(.email-content
-    :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
-          *)))) {
-  table-layout: auto;
-}
-
-:deep(.email-content
-    :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-  width: unset;
-  table-layout: auto;
-  text-align: unset;
-  margin-top: unset;
-  margin-bottom: unset;
-  font-size: unset;
-  line-height: unset;
-}
-
-/* tr */
-
-:deep(.email-content
-    :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
-        *))) {
-  border-bottom-width: 0;
-  border-bottom-color: transparent;
-}
-
-/* td */
-
-:deep(.email-content
-    :is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *)))) {
-  position: unset;
-  border-width: 0;
-  border-color: transparent;
-  padding: 0;
-}
-
-:deep(.email-content
-    :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
-        *))) {
-  vertical-align: revert;
-}
-
-/* image */
-:deep(.email-content
-    :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
-          *)))) {
-  border-width: 0;
-}
-
-:deep(.email-content
-    :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-  margin: 0;
-}
-
-/* before & after */
-
-:deep(.email-content
-    :where(blockquote
-      p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
-        *))::before) {
-  content: none;
-}
-
-:deep(.email-content
-    :where(blockquote
-      p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
-        *))::after) {
-  content: none;
-}
 </style>
diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
new file mode 100644
index 00000000..0f2f16ab
--- /dev/null
+++ b/frontend/src/components/EmailContent.vue
@@ -0,0 +1,108 @@
+<template>
+  <iframe
+    :srcdoc="htmlContent"
+    class="h-screen max-h-[500px] w-full"
+    style="
+      mask-image: linear-gradient(
+        to bottom,
+        black calc(100% - 30px),
+        transparent 100%
+      );
+    "
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+})
+
+const htmlContent = `
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="/src/index.css" rel="stylesheet">
+  <style>
+    .email-content {
+        word-break: break-word;
+    }
+    .email-content
+        :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose']
+            *))) {
+    table-layout: auto;
+    }
+
+    .email-content
+        :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    width: unset;
+    table-layout: auto;
+    text-align: unset;
+    margin-top: unset;
+    margin-bottom: unset;
+    font-size: unset;
+    line-height: unset;
+    }
+
+    /* tr */
+
+    .email-content
+        :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose']
+            *)) {
+    border-bottom-width: 0;
+    border-bottom-color: transparent;
+    }
+
+    /* td */
+
+    .email-content
+        :is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+    position: unset;
+    border-width: 0;
+    border-color: transparent;
+    padding: 0;
+    }
+
+    .email-content
+        :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose']
+            *)) {
+    vertical-align: revert;
+    }
+
+    /* image */
+    .email-content
+        :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose']
+            *))) {
+    border-width: 0;
+    }
+
+    .email-content
+        :where(img):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
+    margin: 0;
+    }
+
+    /* before & after */
+
+    .email-content
+        :where(blockquote
+        p:first-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::before {
+    content: none;
+    }
+
+    .email-content
+        :where(blockquote
+        p:last-of-type):not(:where([class~='not-prose'], [class~='not-prose']
+            *))::after {
+    content: none;
+    }
+  </style>
+</head>
+<body>
+    <div class="email-content prose-f">${props.content}</div>
+</body>
+</html>
+`
+</script>
