From a327f58ccea65cb9d2f1e105f5e6e55bc7503c6f Mon Sep 17 00:00:00 2001
From: Adrian Rumpold <a.rumpold@gmail.com>
Date: Wed, 9 Jul 2025 11:54:49 +0200
Subject: [PATCH] Simplify styles

---
 src/components/QuestionGroupChart.tsx |  9 +++------
 src/config.ts                         |  2 ++
 src/index.css                         | 10 +++++++---
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/QuestionGroupChart.tsx b/src/components/QuestionGroupChart.tsx
index d751cea..76b76f3 100644
--- a/src/components/QuestionGroupChart.tsx
+++ b/src/components/QuestionGroupChart.tsx
@@ -12,11 +12,11 @@ interface QuestionGroupChartProps {
 }
 
 function makeDot(
-  shape: "rect" | "circle",
   g: d3.Selection<SVGGElement, unknown, null, undefined>,
   dotX: number,
   dotY: number
 ) {
+  const shape = config.dotShape;
   if (shape === "circle") {
     return g
       .append("circle")
@@ -50,7 +50,7 @@ export function QuestionGroupChart({
 
     // Group responses by category (within this group only)
     const responseGroups = d3.group(groupData, (d) => d.response);
-    const chartHeight = 200;
+    const chartHeight = config.chartHeight;
     const chartWidth = xScale.range()[1];
 
     const svg = d3
@@ -74,10 +74,7 @@ export function QuestionGroupChart({
         const dotY =
           chartHeight - (row + 1) * (config.dotRadius * 2 + config.dotSpacing);
 
-        makeDot("rect", g, dotX, dotY).attr(
-          "fill",
-          colorScheme[response] || "#666"
-        );
+        makeDot(g, dotX, dotY).attr("fill", colorScheme[response] || "#666");
       });
     });
   }, [groupData, responses, xScale, question]);
diff --git a/src/config.ts b/src/config.ts
index 61e8b7b..0fc99d1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -8,6 +8,8 @@ export const config = {
   dotSpacing,
   columnsPerGroup,
   groupSpacing: (2 * dotRadius + dotSpacing) * columnsPerGroup + groupGap,
+  chartHeight: 150,
+  dotShape: "rect", // "circle" or "rect"
 };
 
 // Color scheme for Likert scale responses
diff --git a/src/index.css b/src/index.css
index 8c2bd94..080dd46 100644
--- a/src/index.css
+++ b/src/index.css
@@ -68,16 +68,21 @@ body {
   border-radius: 8px;
 
   filter: drop-shadow(0 2px 2px hsl(202.5deg 20% 76.5%));
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
 }
 
 .question-group svg {
-  height: 200px;
+  align-self: center;
+  margin-bottom: 16px;
 }
 
 .question-group p {
   font-size: 14px;
   color: #666;
-  margin-top: 10px;
   line-height: 1.4;
   max-width: 40ch;
 }
@@ -85,7 +90,6 @@ body {
 .question-title {
   font-size: 16px;
   font-weight: bold;
-  margin-bottom: 15px;
   color: #333;
 }
 .question-title::before {