snapshot

src/components/SnippetCard.tsx

@@ -35,12 +35,6 @@ type Props = {
   onRemove: (id: number) => void;
 };
 
-const mdBodyClassBase =
-  "snippet-md text-sm leading-relaxed [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/40 [&_blockquote]:pl-3 [&_blockquote]:italic [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-semibold [&_li]:ml-4 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc";
-
-const mdBodyClassCard = `${mdBodyClassBase} max-h-[min(55vh,420px)] overflow-auto`;
-const mdBodyClassDialogPreview = `${mdBodyClassBase} min-h-0 flex-1 overflow-auto`;
-
 export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
   const pristineEmpty =
     !stringFieldForForm(snippet.body) &&
@@ -146,7 +140,7 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
   return (
     <>
       <Card className="gap-0 py-3 text-left shadow-sm">
-        <CardContent className="px-4 pb-2 pt-1">
+        <CardContent className="px-4">
           <div
             role="button"
             tabIndex={0}
@@ -159,11 +153,13 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
               }
             }}
           >
+            <div className="snippet-md-card-wrap">
               <div
-              className={`${mdBodyClassCard}`}
+                className="snippet-md overflow-auto"
                 dangerouslySetInnerHTML={{ __html: viewHtml }}
               />
             </div>
+          </div>
         </CardContent>
         <CardFooter className="flex flex-col gap-2 border-t px-4 pb-3 pt-2 sm:flex-row sm:items-end sm:justify-between">
           <div className="grid w-full gap-1 text-sm sm:max-w-xl">
@@ -235,7 +231,7 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
               />
               {showPreview ? (
                 <div
-                  className={`${mdBodyClassDialogPreview} rounded-md border bg-muted/30 p-3 lg:w-1/2`}
+                  className="snippet-md min-h-0 flex-1 overflow-auto rounded-md border bg-muted/30 p-3 lg:w-1/2"
                   dangerouslySetInnerHTML={{ __html: previewHtml }}
                 />
               ) : null}

src/index.css

@@ -49,3 +49,113 @@ body::before {
     animation: none !important;
   }
 }
+
+/* Markdown rendering (marked HTML) */
+@layer components {
+  .snippet-md {
+    font-size: 0.875rem;
+    line-height: 1.625;
+  }
+
+  .snippet-md :where(p) {
+    margin-block: 0.5rem;
+  }
+
+  .snippet-md :where(a) {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .snippet-md :where(a):hover {
+    text-decoration-thickness: 2px;
+  }
+
+  .snippet-md :where(blockquote) {
+    margin-block: 0.5rem;
+    border-left: 2px solid var(--border);
+    padding-left: 0.75rem;
+    font-style: italic;
+    color: var(--muted-foreground);
+  }
+
+  .snippet-md :where(code) {
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--muted);
+    padding: 0.125rem 0.25rem;
+    font-size: 0.875em;
+  }
+
+  .snippet-md :where(pre) {
+    margin-block: 0.5rem;
+    overflow-x: auto;
+    border-radius: var(--radius-md, 0.375rem);
+    background-color: var(--muted);
+    padding: 0.75rem;
+  }
+
+  .snippet-md :where(pre code) {
+    background-color: transparent;
+    padding: 0;
+    font-size: 0.8125rem;
+  }
+
+  .snippet-md :where(h1) {
+    margin-block: 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .snippet-md :where(h2) {
+    margin-block: 0.75rem 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .snippet-md :where(h3) {
+    margin-block: 0.5rem 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .snippet-md :where(ul, ol) {
+    margin-block: 0.5rem;
+    list-style-position: inside;
+    padding-inline-start: 0;
+  }
+
+  .snippet-md :where(ul) {
+    list-style-type: disc;
+  }
+
+  .snippet-md :where(ol) {
+    list-style-type: decimal;
+  }
+
+  .snippet-md :where(li) {
+    margin-block: 0.125rem;
+    padding-inline-start: 0.25rem;
+  }
+
+  .snippet-md :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+  }
+
+  .snippet-md :where(th, td) {
+    border: 1px solid var(--border);
+    padding: 0.375rem 0.5rem;
+  }
+
+  .snippet-md :where(hr) {
+    margin-block: 1rem;
+    border: 0;
+    border-top: 1px solid var(--border);
+  }
+
+  .snippet-md :where(img) {
+    max-width: 100%;
+    height: auto;
+  }
+}