More styling improvements

src/App.svelte

@@ -106,13 +106,13 @@
     questions empty, and they won't show up. Same goes for sections.
   </p>
 
-  <button on:click={() => exportQuestions(exportBlock)} disabled={state == null}
-    >Refresh</button
+  <button
+    on:click={() => exportQuestions(exportBlock)}
+    disabled={$state.current == null}>Refresh</button
   ><br />
   <textarea
     bind:this={exportBlock}
-    rows="25"
-    cols="150"
+    rows="10"
     id="export"
     readonly
     placeholder={state == null

src/app.scss

@@ -68,6 +68,13 @@ h6 {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+
+  // if smaller than 1280, remove max width and put 1em margin on sides
+  @media (max-width: 1280px) {
+    max-width: none;
+    width: 100%;
+    margin: 0 1em;
+  }
 }
 
 button {
@@ -89,6 +96,12 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+#export {
+  width: 100%;
+  max-width: 600px;
+  max-height: 300px;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/lib/Question.svelte

@@ -11,12 +11,6 @@
   let changed = false;
   const { type, placeholder } = question;
 
-  const cols = {
-    short: 60,
-    medium: 80,
-    long: 140,
-  };
-
   const rows = {
     short: 4,
     medium: 8,
@@ -47,7 +41,6 @@
         on:change={onChange}
         class="answer"
         rows={rows[length ?? "medium"]}
-        cols={cols[length ?? "medium"]}
         {placeholder}
       />
     {:else if type === "number"}
@@ -80,6 +73,7 @@
   input {
     display: block;
     width: 100%;
+    max-width: 600px;
   }
 
   input[type="number"] {
@@ -98,6 +92,11 @@
     width: 80%;
   }
 
+  textarea {
+    width: 100%;
+    max-width: 600px;
+  }
+
   label {
     display: flex;
     flex-direction: column;