fix: Bubble typography (#10653)

![CleanShot 2025-01-08 at 18 22
36@2x](https://github.com/user-attachments/assets/77cc99d2-1bdf-49ff-9016-57bb9c50b149)

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

@@ -77,13 +77,13 @@ const textToShow = computed(() => {
         <template v-else>
           <Letter
             v-if="showQuotedMessage"
-            class-name="prose prose-email !max-w-none"
+            class-name="prose prose-bubble !max-w-none"
             :html="fullHTML"
             :text="textToShow"
           />
           <Letter
             v-else
-            class-name="prose prose-email !max-w-none"
+            class-name="prose prose-bubble !max-w-none"
             :html="unquotedHTML"
             :text="textToShow"
           />

app/javascript/dashboard/components-next/message/bubbles/Text/FormattedContent.vue

@@ -24,8 +24,5 @@ const formattedContent = computed(() => {
 </script>
 
 <template>
-  <span
+  <span v-dompurify-html="formattedContent" class="prose prose-bubble" />
-    v-dompurify-html="formattedContent"
-    class="[&_.link]:text-n-slate-11 [&_.link]:underline [&>p:last-child]:mb-0 [&>ul]:list-inside [&>ol]:list-inside [&>dl]:list-inside [&>ol]:list-decimal [&>ul]:list-disc [&>blockquote]:border-l-4 [&>blockquote]:border-n-alpha-black1 [&>blockquote]:pl-2"
-  />
 </template>

tailwind.config.js

@@ -43,7 +43,7 @@ const tailwindConfig = {
         interDisplay: ['Inter Display', ...defaultSansFonts],
       },
       typography: {
-        email: {
+        bubble: {
           css: {
             color: 'rgb(var(--slate-12))',
             lineHeight: '1.6',
@@ -100,26 +100,37 @@ const tailwindConfig = {
               color: 'rgb(var(--text-blue))',
               textDecoration: 'underline',
             },
+            ul: {
+              paddingInlineStart: '0.625em',
+            },
+            ol: {
+              paddingInlineStart: '0.625em',
+            },
             'ul li': {
-              margin: '0 0 0.5em 1.5em',
+              margin: '0 0 0.5em 1em',
               listStyleType: 'disc',
             },
             'ol li': {
-              margin: '0 0 0.5em 1.5em',
+              margin: '0 0 0.5em 1em',
               listStyleType: 'decimal',
             },
             blockquote: {
-              fontStyle: 'italic',
               color: 'rgb(var(--slate-11))',
-              borderLeft: `4px solid rgb(var(--border-strong))`,
+              borderLeft: `4px solid rgb(var(--black-alpha-1))`,
               paddingLeft: '1em',
             },
             code: {
               backgroundColor: 'rgb(var(--alpha-3))',
-              color: 'rgb(var(--solid-amber))',
+              color: 'rgb(var(--slate-11))',
               padding: '0.2em 0.4em',
               borderRadius: '4px',
               fontSize: '0.95em',
+              '&::before': {
+                content: `none`,
+              },
+              '&::after': {
+                content: `none`,
+              },
             },
             pre: {
               backgroundColor: 'rgb(var(--alpha-3))',