From e3de8172b630452d701ed058c9377906c7761e67 Mon Sep 17 00:00:00 2001
From: Lyssieth <lys@lys.ee>
Date: Fri, 5 Jan 2024 16:09:43 +0200
Subject: [PATCH] More styling improvements

---
 src/App.svelte          |  8 ++++----
 src/app.scss            | 13 +++++++++++++
 src/lib/Question.svelte | 13 ++++++-------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 3cd117d..2be2746 100644
--- a/src/App.svelte
+++ b/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
diff --git a/src/app.scss b/src/app.scss
index ce1034c..082ec67 100644
--- a/src/app.scss
+++ b/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;
diff --git a/src/lib/Question.svelte b/src/lib/Question.svelte
index 42c965b..1369275 100644
--- a/src/lib/Question.svelte
+++ b/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;