From c9112e5f2eb8b7d4aa685bc73277663e812ac6e8 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:35:54 +0200
Subject: [PATCH] Match charts preview surface width range to company card

---
 components/charts.html | 2 +-
 styleguide.css         | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/charts.html b/components/charts.html
index aa81158..75ae63f 100644
--- a/components/charts.html
+++ b/components/charts.html
@@ -13,7 +13,7 @@
   <section id="component-score-bar">
     <p class="sg-preview-label">Component: Score-Balken / Median-Marker</p>
 
-    <div class="sg-form-preview-area">
+    <div class="sg-form-preview-area sg-chart-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>
diff --git a/styleguide.css b/styleguide.css
index 9c4a39f..99a71c3 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2275,6 +2275,12 @@ section + section {
   background: transparent;
 }
 
+.sg-chart-preview-area {
+  min-width: var(--layout-object-card-min-width);
+  max-width: var(--layout-object-card-max-width);
+  width: 100%;
+}
+
 .sg-bar-chart {
   display: block;
   width: 100%;