improve markdown rendering after bootstrap resets was removed (#1402)

Noticed styles of markdown looked much worse recently

## Before

special note to large gap at the front and missing code formatting 
<img width="1782" height="1438" alt="Screenshot 2025-11-24 at 10 06 47 AM" src="https://github.com/user-attachments/assets/f5abbb61-1c99-424a-85d2-d1c12b489dbd" />
<img width="1910" height="1612" alt="Screenshot 2025-11-24 at 10 06 51 AM" src="https://github.com/user-attachments/assets/1eff6b65-b198-42c9-bc85-0068c6de7da5" />

## After
<img width="1350" height="1454" alt="Screenshot 2025-11-24 at 10 06 18 AM" src="https://github.com/user-attachments/assets/bba5f396-be1b-43c5-9d6f-bb4d264c11b9" />
<img width="1108" height="1568" alt="Screenshot 2025-11-24 at 10 06 29 AM" src="https://github.com/user-attachments/assets/73059e6e-c4fe-4872-953f-8f34c5ac40c9" />

Author: brandon-pereira

.changeset/afraid-oranges-speak.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+improve markdown rendering after we removed bootrstrap reset styles

packages/app/src/HDXMarkdownChart.tsx

@@ -10,7 +10,7 @@ const HDXMarkdownChart = memo(
     };
   }) => {
     return (
-      <div className="HDXMarkdownChart">
+      <div className="hdx-markdown">
         <ReactMarkdown>{markdown ?? ''}</ReactMarkdown>
       </div>
     );

packages/app/styles/app.scss

@@ -304,3 +304,41 @@ a,
   background: #50fa7a0d !important;
   color: #2E224788;
 }
+
+.hdx-markdown {
+  h1, h2, h3, h4, h5, h6, p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+  ol, ul {
+   padding-left: 2rem;
+  }
+  th {
+    font-weight: 600;
+  }
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.8rem;
+  }
+  h3 {
+    font-size: 1.6rem;
+  }
+  h4 {
+    font-size: 1.4rem;
+  }
+  // Remove margin on first and last child elements
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  code {
+    font-size: 0.875em;
+    color: var(--color-json-string);
+    word-wrap: break-word;
+  }
+}