Simplify styles

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]);

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

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 {