fix: prevent list marker overflow in messages (#14618)

app/javascript/widget/assets/scss/woot.scss

@@ -34,13 +34,24 @@ body {
 
 .message-content {
   ul {
-    list-style: disc;
+    @apply list-disc list-inside;
-    @apply ltr:pl-3 rtl:pr-3;
   }
 
   ol {
-    list-style: decimal;
+    @apply list-decimal list-inside;
-    @apply ltr:pl-4 rtl:pr-4;
+  }
+
+  li {
+    padding-inline-start: 1.5em;
+    text-indent: -1.5em;
+
+    > p:first-child {
+      @apply inline;
+    }
+
+    > * {
+      text-indent: 0;
+    }
   }
 }
 

tailwind.config.js

@@ -106,24 +106,30 @@ const tailwindConfig = {
               textDecoration: 'underline',
             },
             ul: {
-              paddingInlineStart: '0.625em',
+              paddingInlineStart: '0',
+              listStylePosition: 'inside',
             },
             ol: {
-              paddingInlineStart: '0.625em',
+              paddingInlineStart: '0',
+              listStylePosition: 'inside',
             },
-            'ul li': {
+            'ul > li': {
-              margin: '0 0 0.5em 1em',
+              marginBlockEnd: '0.5em',
               listStyleType: 'disc',
-              '[dir="rtl"] &': {
+              paddingInlineStart: '1.5em',
-                margin: '0 1em 0.5em 0',
+              textIndent: '-1.5em',
-              },
             },
-            'ol li': {
+            'ol > li': {
-              margin: '0 0 0.5em 1em',
+              marginBlockEnd: '0.5em',
               listStyleType: 'decimal',
-              '[dir="rtl"] &': {
+              paddingInlineStart: '1.5em',
-                margin: '0 1em 0.5em 0',
+              textIndent: '-1.5em',
-              },
+            },
+            'li > p:first-child': {
+              display: 'inline',
+            },
+            'li > *': {
+              textIndent: '0',
             },
             blockquote: {
               color: 'rgb(var(--slate-11))',