From adf155e954592b0b2ac44702de66a020275c5856 Mon Sep 17 00:00:00 2001
From: Nathan Schneider <n@nathanschneider.info>
Date: Wed, 7 May 2025 21:48:48 -0600
Subject: [PATCH] Consolidated component headers

---
 static/css/main.css                           | 19 ++++++++++---------
 static/js/builder.js                          |  8 +++++---
 .../layouts/_default/builder.html             | 13 +++++++++++--
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 9264eb1..8cd40c2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1079,7 +1079,7 @@ input:checked + .toggle-slider:before {
   background-color: rgba(0, 0, 0, 0.02);
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   /* Remove clickable appearance since components won't be collapsible */
   cursor: default;
 }
@@ -1089,19 +1089,20 @@ input:checked + .toggle-slider:before {
 }
 
 .component-short-label {
-  font-size: 0.75rem;
+  font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--accent-color);
-  margin-bottom: 0.25rem;
-  font-weight: 500;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
 }
 
-.component-header h3 {
-  font-size: 1.2rem;
-  margin: 0;
-  color: var(--dark-color);
-  font-weight: 600;
+.component-description {
+  font-size: 0.8rem;
+  color: var(--medium-color);
+  margin-bottom: 0.5rem;
+  font-style: italic;
+  line-height: 1.2;
 }
 
 .component-body {
diff --git a/static/js/builder.js b/static/js/builder.js
index a7af30a..410400b 100644
--- a/static/js/builder.js
+++ b/static/js/builder.js
@@ -111,15 +111,17 @@ document.addEventListener('DOMContentLoaded', function() {
           padding-bottom: 0 !important;
         }
         
-        .component-short-label { display: none !important; }
+        .component-short-label { display: block !important; }
+        .component-description { display: none !important; }
         
         /* Improved typography for preview mode */
-        .component-header h3 {
-          font-size: 1.4rem !important;
+        .component-short-label {
+          font-size: 1.2rem !important;
           margin-bottom: 1rem !important;
           color: #000 !important;
           border-bottom: 1px solid #eee !important;
           padding-bottom: 0.5rem !important;
+          font-weight: 600 !important;
         }
       `;
       
diff --git a/themes/dispute-protocol-theme/layouts/_default/builder.html b/themes/dispute-protocol-theme/layouts/_default/builder.html
index 9465718..d142407 100644
--- a/themes/dispute-protocol-theme/layouts/_default/builder.html
+++ b/themes/dispute-protocol-theme/layouts/_default/builder.html
@@ -45,7 +45,7 @@
                   <div class="component-header">
                     <div class="component-title-wrapper">
                       <div class="component-short-label">{{ $componentId | humanize }}</div>
-                      <h3>{{ .title }}</h3>
+                      <div class="component-description">{{ .description }}</div>
                     </div>
                   </div>
                   <div class="component-body">
@@ -207,7 +207,16 @@ document.addEventListener('DOMContentLoaded', function() {
         background-color: transparent !important;
         border-bottom: none !important;
       }
-      .component-short-label { display: none !important; }
+      .component-short-label { 
+        display: block !important; 
+        font-size: 1.2rem !important;
+        margin-bottom: 1rem !important;
+        color: #000 !important;
+        border-bottom: 1px solid #eee !important;
+        padding-bottom: 0.5rem !important;
+        font-weight: 600 !important;
+      }
+      .component-description { display: none !important; }
     `;
     document.head.appendChild(style);