styling

src/lib/DatasetViewer.svelte

@@ -647,6 +647,24 @@
                 {/if}
 
                 <div class="comparisons-list">
+                  {#if selectedTerm1 || selectedTerm2}
+                    <div class="comparisons-header">
+                      <div class="header-column left">
+                        <div class="detail-term">
+                          {normalizeTermForComparison(selectedTerm1)}
+                        </div>
+                      </div>
+                      <div class="header-column center">
+                        <div class="detail-term">Comparison</div>
+                      </div>
+                      <div class="header-column right">
+                        <div class="detail-term">
+                          {normalizeTermForComparison(selectedTerm2)}
+                        </div>
+                      </div>
+                    </div>
+                  {/if}
+
                   {#each filteredComparisons as comparison}
                     <div class="comparison-item">
                       <div class="comparison-header">
@@ -684,11 +702,6 @@
                       <div class="comparison-details">
                         <div class="detail-column left">
                           {#if getTemplateJ1(comparison)}
-                            <div class="detail-term">
-                              {normalizeTermForComparison(
-                                getTemplateJ1(comparison)?.term
-                              )}
-                            </div>
                             <div class="detail-answer">
                               {getTemplateJ1(comparison)?.answer}
                             </div>
@@ -707,11 +720,6 @@
 
                         <div class="detail-column right">
                           {#if getTemplateJ2(comparison)}
-                            <div class="detail-term">
-                              {normalizeTermForComparison(
-                                getTemplateJ2(comparison)?.term
-                              )}
-                            </div>
                             <div class="detail-answer">
                               {getTemplateJ2(comparison)?.answer}
                             </div>
@@ -1101,6 +1109,37 @@
     border-top: 1px solid #e0e0e0;
   }
 
+  .comparisons-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+    align-items: center;
+  }
+
+  .comparisons-header .header-column {
+    background: none;
+    padding: 0.5rem 0.75rem;
+    color: #333;
+    font-weight: 700;
+  }
+
+  .comparisons-header .header-column.left {
+    text-align: left;
+    padding-left: 0.5rem;
+    border-right: 1px solid #e0e0e0;
+  }
+
+  .comparisons-header .header-column.center {
+    text-align: center;
+    border-right: 1px solid #e0e0e0;
+  }
+
+  .comparisons-header .header-column.right {
+    text-align: right;
+    padding-right: 0.5rem;
+  }
+
   .comparisons-list {
     display: flex;
     flex-direction: column;
@@ -1173,6 +1212,14 @@
     .comparison-details {
       grid-template-columns: 1fr;
     }
+    .comparisons-header {
+      grid-template-columns: 1fr;
+    }
+    .comparisons-header .header-column {
+      border-right: none;
+      text-align: left;
+      padding: 0.25rem 0.5rem;
+    }
   }
 
   .comparison-category {
@@ -1283,7 +1330,6 @@
     margin-top: 0.5rem;
     padding: 0.75rem;
     background: white;
-    border-left: 3px solid #646cff;
     border-radius: 4px;
     font-size: 0.9rem;
     line-height: 1.5;