From 841020e102554384e3c2a58822c8505851fb5147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 20 May 2026 13:34:49 +0200
Subject: [PATCH] Wrap charts component preview in padded light-grey surface

---
 components/charts.html | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/charts.html b/components/charts.html
index b7807d9..aa81158 100644
--- a/components/charts.html
+++ b/components/charts.html
@@ -13,28 +13,30 @@
   <section id="component-score-bar">
     <p class="sg-preview-label">Component: Score-Balken / Median-Marker</p>
 
-    <div class="sg-score-bar-list" data-component="score-bar-list">
-      <div class="sg-score-bar-item" data-component="score-bar">
-        <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
-        <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
-          <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
-          <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+    <div class="sg-form-preview-area">
+      <div class="sg-score-bar-list" data-component="score-bar-list">
+        <div class="sg-score-bar-item" data-component="score-bar">
+          <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
+          <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
+            <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
+            <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+          </div>
         </div>
-      </div>
 
-      <div class="sg-score-bar-item" data-component="score-bar">
-        <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
-        <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
-          <div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
-          <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+        <div class="sg-score-bar-item" data-component="score-bar">
+          <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
+          <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
+            <div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
+            <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
+          </div>
         </div>
-      </div>
 
-      <div class="sg-score-bar-item" data-component="score-bar">
-        <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
-        <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
-          <div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
-          <div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
+        <div class="sg-score-bar-item" data-component="score-bar">
+          <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
+          <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
+            <div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
+            <div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
+          </div>
         </div>
       </div>
     </div>
@@ -43,4 +45,4 @@
 
 
 </body>
-</html>
\ No newline at end of file
+</html>