fix: stream down render problem and remove useless classnames

web/app/components/app/in-site-message/index.tsx

@@ -110,7 +110,7 @@ function InSiteMessage({
         </div>
       </div>
 
-      <div className="px-4 pb-2 pt-4 text-text-secondary body-md-regular [&_p]:mb-2 [&_ul]:list-disc [&_ul]:pl-5">
+      <div className="px-4 pb-2 pt-4 text-text-secondary body-md-regular">
         <MarkdownWithDirective markdown={main} />
       </div>
 

web/app/components/base/markdown-with-directive/index.spec.tsx

@@ -5,6 +5,8 @@ import WithIconCardItem from './components/with-icon-card-item'
 import WithIconCardList from './components/with-icon-card-list'
 import { MarkdownWithDirective } from './index'
 
+const FOUR_COLON_RE = /:{4}/
+
 vi.mock('next/image', () => ({
   default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} />,
 }))
@@ -155,6 +157,20 @@ describe('markdown-with-directive', () => {
       expect(screen.queryByText('Invalid Icon')).not.toBeInTheDocument()
     })
 
+    it('should not render trailing fence text for four-colon container directives', () => {
+      const markdown = [
+        '::::withiconcardlist {className="custom-list"}',
+        ':withiconcarditem[Card Title]{icon="https://example.com/icon.png"}',
+        '::::',
+      ].join('\n')
+
+      const { container } = render(<MarkdownWithDirective markdown={markdown} />)
+
+      expect(screen.getByText('Card Title')).toBeInTheDocument()
+      expect(screen.queryByText(FOUR_COLON_RE)).not.toBeInTheDocument()
+      expect(container.textContent).not.toContain('::::')
+    })
+
     it('should call sanitizer and render based on sanitized markdown', () => {
       const sanitizeSpy = vi.spyOn(DOMPurify, 'sanitize')
         .mockReturnValue(':withiconcarditem[Sanitized]{icon="https://example.com/safe.png"}')

web/app/components/base/markdown-with-directive/index.tsx

@@ -270,12 +270,16 @@ export function MarkdownWithDirective({ markdown }: MarkdownWithDirectiveProps)
     return null
 
   return (
-    <Streamdown
-      remarkPlugins={[remarkDirective, directivePlugin]}
-      rehypePlugins={directiveRehypePlugins}
-      components={directiveComponents}
-    >
-      {normalizedMarkdown}
-    </Streamdown>
+    <div className="markdown-body">
+      <Streamdown
+        mode="static"
+        remarkPlugins={[remarkDirective, directivePlugin]}
+        rehypePlugins={directiveRehypePlugins}
+        components={directiveComponents}
+      >
+        {normalizedMarkdown}
+      </Streamdown>
+    </div>
+
   )
 }