From b314e047c12e0e6c7a8d9d2a0628bc9620ec8b0b Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 6 Jun 2022 11:19:40 -0400
Subject: [PATCH 1/2] Tweak spatial audio copy

---
 src/input/Input.jsx            | 14 +++++++++++++-
 src/input/Input.module.css     | 10 +++++++++-
 src/settings/SettingsModal.jsx |  3 ++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/input/Input.jsx b/src/input/Input.jsx
index 65d6ce3..820956b 100644
--- a/src/input/Input.jsx
+++ b/src/input/Input.jsx
@@ -39,7 +39,18 @@ export function Field({ children, className, ...rest }) {
 
 export const InputField = forwardRef(
   (
-    { id, label, className, type, checked, prefix, suffix, disabled, ...rest },
+    {
+      id,
+      label,
+      className,
+      type,
+      checked,
+      prefix,
+      suffix,
+      description,
+      disabled,
+      ...rest
+    },
     ref
   ) => {
     return (
@@ -82,6 +93,7 @@ export const InputField = forwardRef(
           {label}
         </label>
         {suffix && <span>{suffix}</span>}
+        {description && <p className={styles.description}>{description}</p>}
       </Field>
     );
   }
diff --git a/src/input/Input.module.css b/src/input/Input.module.css
index 865a895..c04a85a 100644
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -118,13 +118,15 @@
 .checkboxField {
   display: flex;
   align-items: flex-start;
+  flex-wrap: wrap;
 }
 
 .checkboxField label {
   display: flex;
   align-items: center;
   flex-grow: 1;
-  font-size: 13px;
+  font-size: 15px;
+  line-height: 24px;
 }
 
 .checkboxField input {
@@ -176,3 +178,9 @@
   color: var(--alert);
   font-weight: 600;
 }
+
+.description {
+  color: var(--secondary-content);
+  margin-left: 26px;
+  width: 100%; /* Ensure that it breaks onto the next row */
+}
diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx
index ad2aeef..3881874 100644
--- a/src/settings/SettingsModal.jsx
+++ b/src/settings/SettingsModal.jsx
@@ -87,9 +87,10 @@ export const SettingsModal = (props) => {
           <FieldRow>
             <InputField
               id="spatialAudio"
-              label="Spatial audio (experimental)"
+              label="Spatial audio"
               type="checkbox"
               checked={spatialAudio}
+              description="This will make a speaker's audio sound as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
               onChange={(e) => setSpatialAudio(e.target.checked)}
             />
           </FieldRow>

From 2667e78b43f475684ec8bae47d1c92fb00afb514 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Mon, 6 Jun 2022 11:26:48 -0400
Subject: [PATCH 2/2] =?UTF-8?q?sound=20=E2=86=92=20seem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/settings/SettingsModal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx
index 3881874..919b955 100644
--- a/src/settings/SettingsModal.jsx
+++ b/src/settings/SettingsModal.jsx
@@ -90,7 +90,7 @@ export const SettingsModal = (props) => {
               label="Spatial audio"
               type="checkbox"
               checked={spatialAudio}
-              description="This will make a speaker's audio sound as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
+              description="This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
               onChange={(e) => setSpatialAudio(e.target.checked)}
             />
           </FieldRow>