style

src/app.css

@@ -40,7 +40,7 @@ h1 {
 }
 
 #app {
-  max-width: 1280px;
+  max-width: none;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;

src/lib/DatasetViewer.svelte

@@ -188,7 +188,9 @@
         {#if selectedTerm1}
           <div class="definition-box">
             <h4>Definition:</h4>
-            <p>{getSelectedDefinition1()}</p>
+            <div class="markdown-content">
+              {@html marked(getSelectedDefinition1())}
+            </div>
           </div>
         {/if}
         <div class="info">
@@ -210,7 +212,9 @@
         {#if selectedTerm2}
           <div class="definition-box">
             <h4>Definition:</h4>
-            <p>{getSelectedDefinition2()}</p>
+            <div class="markdown-content">
+              {@html marked(getSelectedDefinition2())}
+            </div>
           </div>
         {/if}
         <div class="info">
@@ -248,7 +252,7 @@
 
 <style>
   .jurisdiction-comparison {
-    max-width: 1400px;
+    max-width: 75%;
     margin: 0 auto;
     padding: 2rem;
     color: #333;
@@ -378,12 +382,6 @@
     min-height: 100px;
   }
 
-  .definition-box p {
-    margin: 0;
-    line-height: 1.6;
-    color: #333;
-  }
-
   .info {
     color: #666;
     font-size: 0.875rem;