website

commit 9d58e468118b7e1d11ac364b929fc5a1384f7018
parent 4928862656a56f065773d4e5c65b7de9a121ddb5
Author: hrryt <harry@mayesfield.uk>
Date:   Fri, 31 Jul 2026 21:01:58 +0100

Style nested question lists

Diffstat:
M
src/components/QuestionList.jsx
 | 
8
+++++++-
M
src/components/QuestionWindow.jsx
 | 
4
+++-
M
src/styles/main.css
 | 
22
++++++++++++++--------

3 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/src/components/QuestionList.jsx b/src/components/QuestionList.jsx
@@ -1,5 +1,11 @@
 import * as React from 'react';
 
 export default function QuestionList({ children }) {
-  return <ol className="question-list">{children}</ol>;
+  return (
+    <li>
+      <ol className="question-list">
+        {children}
+      </ol>
+    </li>
+  );
 }
diff --git a/src/components/QuestionWindow.jsx b/src/components/QuestionWindow.jsx
@@ -101,7 +101,9 @@ export default function QuestionWindow({ data }) {
         </button>
       </fieldset>
       <div className="field-border question-field kern">
-        {questions}
+        <ol className="master-question-list">
+          {questions}
+        </ol>
       </div>
     </Window>
   );
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -2,22 +2,28 @@ body {
   background-color: #008080;
 }
 
-fieldset {
-  margin-bottom: 7px;
-}
-
 .window {
-  width: min-content;
+  min-width: min-content;
+  max-width: max-content;
 }
 
-.question-list {
-  margin-right: 15px;
+fieldset {
+  margin-bottom: 7px;
 }
 
 .field-border {
   font-size: 1.25rem;
+  padding: 20px;
 }
 
-.question-field {
+.master-question-list {
+  margin: 0;
+  padding-left: 20px;
   display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+
+.question-list {
+  list-style-type: lower-latin;
 }