fix: alert sizing

src/App.tsx

@@ -43,7 +43,7 @@ const App: Component = () => {
         </div>
       </header>
       <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 print:p-0">
-        <Article src={currentPath()} />
+        <Article class="prose-sm" src={currentPath()} />
       </main>
     </div>
   );

src/components/md-table.tsx

@@ -179,7 +179,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
           </div>
         </div>
       </div>
-      <div class="p-1 prose max-w-none">
+      <div class="p-4 prose max-w-none">
         <Show when={!csvData.loading && filteredRows().length > 0}>
           <div innerHTML={bodyHtml()} />
         </Show>

src/styles.css

@@ -1,14 +1,27 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
-.markdown-alert {
-    @apply px-4 rounded mb-4 border;
+.prose {
+    @apply prose-h2:first:mt-0 prose-h3:first:mt-0 prose-h4:first:mt-0 prose-h5:first:mt-0;
 }
 
 .markdown-alert-title{
     @apply hidden;
 }
 
+.markdown-alert-title + h1,
+.markdown-alert-title + h2,
+.markdown-alert-title + h3,
+.markdown-alert-title + h4,
+.markdown-alert-title + h5
+{
+    @apply mt-0;
+}
+
+.markdown-alert {
+    @apply px-4 pt-4 rounded mb-4 border;
+}
+
 .markdown-alert-note {
     @apply bg-blue-50 border-blue-500;
 }