From f111274262810170cae438c545398e19b406b814 Mon Sep 17 00:00:00 2001
From: Stefan ATZLESBERGER <stefan.atzlesberger@corner4.com>
Date: Thu, 16 Apr 2026 13:46:39 +0200
Subject: [PATCH] snapshot

---
 src/components/SnippetCard.tsx |  20 +++---
 src/index.css                  | 110 +++++++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 12 deletions(-)

diff --git a/src/components/SnippetCard.tsx b/src/components/SnippetCard.tsx
index bc31e90..29d010f 100644
--- a/src/components/SnippetCard.tsx
+++ b/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,10 +153,12 @@ export function SnippetCard({ snippet, onReplace, onRemove }: Props) {
               }
             }}
           >
-            <div
-              className={`${mdBodyClassCard}`}
-              dangerouslySetInnerHTML={{ __html: viewHtml }}
-            />
+            <div className="snippet-md-card-wrap">
+              <div
+                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">
@@ -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}
diff --git a/src/index.css b/src/index.css
index 5043e05..9ad5b78 100644
--- a/src/index.css
+++ b/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;
+  }
+}