From 94c4336dc59144d3a0bc01220fa8c511c2514c64 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 28 Feb 2024 16:09:26 +0530
Subject: [PATCH] fix: fix table issue in email content

---
 frontend/src/components/Activities.vue | 78 +++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index daeb2cfc..609ea0b3 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -415,8 +415,7 @@
               <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
             </div>
             <span
-              class="prose-f"
-              :style="{wordBreak: 'break-word'}"
+              class="email-content prose-f"
               v-html="activity.data.content"
             />
             <div class="flex flex-wrap gap-2">
@@ -1119,4 +1118,79 @@ 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>