From a6cfd7ff9b4025353f0ff7709ac24446d2043326 Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 16:20:11 +0200
Subject: [PATCH 1/6] fixed radio button spacing with css

---
 src/assets/main.css              | 18 ++++++++++++++++--
 src/components/ScaleControls.vue |  6 +++---
 src/views/AnalysisView.vue       | 10 +++++-----
 src/views/MidiView.vue           | 12 +++++-------
 src/views/PreferencesView.vue    | 14 +++++++-------
 src/views/SynthView.vue          | 17 ++++++++---------
 6 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 7a95f60d..536ae780 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -36,6 +36,16 @@ code {
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
 }
+label.right-of-checkbox{
+  margin-left: 0.1rem;
+  text-align: left;
+  vertical-align: baseline;
+}
+label.right-of-radio{
+  margin-left: 0.25rem;
+  text-align: left;
+  vertical-align: baseline;
+}
 
 /* UI elements */
 input[type='text'],
@@ -50,6 +60,10 @@ select {
   width: 6rem;
   line-height: var(--base-line-height);
 }
+input[type='radio']
+ {
+  vertical-align: -0.05rem
+}
 optgroup {
   font-weight: bold;
 }
@@ -138,13 +152,13 @@ ul.btn-group {
   flex-grow: 0.25 !important;
 }
 .control.checkbox-container {
-  flex-flow: unset;
+  flex-flow: unset;;
 }
 .control.checkbox-container label {
   font-weight: normal;
 }
 .control.radio-group {
-  gap: 0.15rem 1rem;
+  gap: 0rem 1rem;
 }
 .control.radio-group span label {
   font-weight: unset;
diff --git a/src/components/ScaleControls.vue b/src/components/ScaleControls.vue
index a5d38ac4..de5c8d6e 100644
--- a/src/components/ScaleControls.vue
+++ b/src/components/ScaleControls.vue
@@ -87,7 +87,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-silver"> Silver </label>
+        <label for="colors-silver" class="right-of-radio">Silver</label>
       </span>
 
       <span>
@@ -98,7 +98,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-cents"> Cents </label>
+        <label for="colors-cents" class="right-of-radio">Cents</label>
       </span>
 
       <span>
@@ -109,7 +109,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-factors"> Factors </label>
+        <label for="colors-factors" class="right-of-radio">Factors</label>
       </span>
     </div>
   </div>
diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
index 69023288..c3934e5b 100644
--- a/src/views/AnalysisView.vue
+++ b/src/views/AnalysisView.vue
@@ -230,17 +230,17 @@ function highlight(y?: number, x?: number) {
         <label>Display intervals in matrix as</label>
         <span>
           <input type="radio" id="format-best" value="best" v-model="cellFormat" />
-          <label for="format-best"> Default </label>
+          <label for="format-best" class="right-of-radio">Default</label>
         </span>
 
         <span>
           <input type="radio" id="format-cents" value="cents" v-model="cellFormat" />
-          <label for="format-cents"> Cents </label>
+          <label for="format-cents" class="right-of-radio">Cents</label>
         </span>
 
         <span>
           <input type="radio" id="format-decimal" value="decimal" v-model="cellFormat" />
-          <label for="format-decimal"> Decimal ratio </label>
+          <label for="format-decimal" class="right-of-radio">Decimal ratio</label>
         </span>
       </div>
     </div>
@@ -383,11 +383,11 @@ function highlight(y?: number, x?: number) {
             <label>Error model</label>
             <span>
               <input type="radio" id="error-rooted" value="rooted" v-model="errorModel" />
-              <label for="error-rooted"> Rooted </label>
+              <label for="error-rooted" class="right-of-radio">Rooted</label>
             </span>
             <span>
               <input type="radio" id="error-free" value="free" v-model="errorModel" />
-              <label for="error-free"> Free </label>
+              <label for="error-free" class="right-of-radio">Free</label>
             </span>
           </div>
         </div>
diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index 9e15dabe..eaff36aa 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -167,9 +167,7 @@ onUnmounted(() => {
           <div class="control channels-wrapper">
             <label>Input channels</label>
             <span v-for="channel in 16" :key="channel">
-              <label :class="{ active: inputHighlights.has(channel) }">{{
-                ' ' + channel + ' '
-              }}</label>
+              <label :class="{ active: inputHighlights.has(channel) }">{{channel}}</label>
               <input
                 type="checkbox"
                 :value="channel"
@@ -186,19 +184,19 @@ onUnmounted(() => {
             <label>Color mapping</label>
             <span>
               <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
-              <label for="white-off"> Chromatic </label>
+              <label for="white-off" class="right-of-radio">Chromatic</label>
             </span>
             <span>
               <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
-              <label for="white-simple"> White only </label>
+              <label for="white-simple" class="right-of-radio">White only</label>
             </span>
             <span>
               <input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
-              <label for="white-black"> White w/ interpolation </label>
+              <label for="white-black" class="right-of-radio">White w/ interpolation</label>
             </span>
             <span>
               <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
-              <label for="white-color"> White key to white color </label>
+              <label for="white-color" class="right-of-radio">White key to white color</label>
             </span>
           </div>
         </div>
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index 953d467a..2295987c 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -31,14 +31,14 @@ const scale = useScaleStore()
         <div class="control-group">
           <div class="control checkbox-container">
             <input id="has-left-of-z" type="checkbox" v-model="scale.hasLeftOfZ" />
-            <label for="has-left-of-z"> There's a key between left Shift and 'Z'</label>
+            <label for="has-left-of-z" class="right-of-checkbox">There's a key between left Shift and 'Z'</label>
           </div>
         </div>
         <h2>Advanced</h2>
         <div class="control-group">
           <div class="control checkbox-container">
             <input id="virtual-qwerty" type="checkbox" v-model="state.showVirtualQwerty" />
-            <label for="virtual-qwerty"> Virtual QWERTY in top menu</label>
+            <label for="virtual-qwerty" class="right-of-checkbox">Virtual QWERTY in top menu</label>
           </div>
           <div class="control">
             <label for="gas">Computational budget (gas)</label>
@@ -53,11 +53,11 @@ const scale = useScaleStore()
           <div class="control radio-group">
             <span>
               <input type="radio" id="scheme-light" value="light" v-model="state.colorScheme" />
-              <label for="scheme-light"> Light </label>
+              <label for="scheme-light" class="right-of-radio">Light </label>
             </span>
             <span>
               <input type="radio" id="scheme-dark" value="dark" v-model="state.colorScheme" />
-              <label for="scheme-dark"> Dark </label>
+              <label for="scheme-dark" class="right-of-radio">Dark </label>
             </span>
           </div>
           <h3>Accidentals</h3>
@@ -69,7 +69,7 @@ const scale = useScaleStore()
                 value="double"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-double"> Double 𝄫/𝄪</label>
+              <label for="accidentals-double" class="right-of-radio">Double 𝄫/𝄪</label>
             </span>
             <span>
               <input
@@ -78,7 +78,7 @@ const scale = useScaleStore()
                 value="single"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single"> Single ♭♭/♯♯</label>
+              <label for="accidentals-single" class="right-of-radio">Single ♭♭/♯♯</label>
             </span>
             <span>
               <input
@@ -87,7 +87,7 @@ const scale = useScaleStore()
                 value="ASCII"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single"> ASCII bb/##</label>
+              <label for="accidentals-single" class="right-of-radio">ASCII bb/##</label>
             </span>
           </div>
         </div>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index ae78c8f5..79030248 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -260,17 +260,17 @@ onUnmounted(() => {
                 value="oscillator"
                 v-model="audio.synthType"
               />
-              <label for="type-oscillator"> Oscillator </label>
+              <label for="type-oscillator" class="right-of-radio">Oscillator</label>
             </span>
 
             <span>
               <input type="radio" id="type-unison" value="unison" v-model="audio.synthType" />
-              <label for="type-unison"> Unison </label>
+              <label for="type-unison" class="right-of-radio">Unison</label>
             </span>
 
             <span>
               <input type="radio" id="type-aperiodic" value="aperiodic" v-model="audio.synthType" />
-              <label for="type-aperiodic"> Aperiodic </label>
+              <label for="type-aperiodic" class="right-of-radio">Aperiodic</label>
             </span>
           </div>
           <template v-if="audio.synthType === 'unison'">
@@ -427,28 +427,27 @@ onUnmounted(() => {
                 value="isomorphic"
                 v-model="scale.keyboardMode"
               />
-              <label for="mode-isomorphic"> Isomorphic </label>
+              <label for="mode-isomorphic" class="right-of-radio">Isomorphic</label>
             </span>
             <span>
               <input type="radio" id="mode-piano" value="piano" v-model="scale.keyboardMode" />
-              <label for="mode-piano"> Piano-style layers </label>
+              <label for="mode-piano" class="right-of-radio">Piano-style layers</label>
             </span>
           </div>
           <template v-if="scale.keyboardMode === 'piano'">
             <div class="control radio-group">
               <span>
                 <input type="radio" id="mode-asdf" value="Asdf" v-model="scale.pianoMode" />
-                <label for="mode-asdf"> White on ASDF & black on QWERTY </label>
+                <label for="mode-asdf" class="right-of-radio">White on ASDF & black on QWERTY</label>
               </span>
               <span>
                 <input type="radio" id="mode-qwe-zxc" value="QweZxc" v-model="scale.pianoMode" />
-                <label for="mode-qwe-zxc">
-                  QWERTY & digits + ZXCV & ASDF separated by an equave</label
+                <label for="mode-qwe-zxc" class="right-of-radio">QWERTY & digits + ZXCV & ASDF separated by an equave</label
                 >
               </span>
               <span>
                 <input type="radio" id="mode-zxc" value="Zxc" v-model="scale.pianoMode" />
-                <label for="mode-zxc"> ZXCV with split accidentals above</label>
+                <label for="mode-zxc" class="right-of-radio">ZXCV with split accidentals above</label>
               </span>
             </div>
           </template>

From c38f3b66dcbf4dfcb81291a73aa66a7785b1e51c Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 18:56:36 +0200
Subject: [PATCH 2/6] fixing MidiView

---
 src/views/MidiView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index eaff36aa..4cd46cbd 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -167,7 +167,7 @@ onUnmounted(() => {
           <div class="control channels-wrapper">
             <label>Input channels</label>
             <span v-for="channel in 16" :key="channel">
-              <label :class="{ active: inputHighlights.has(channel) }">{{channel}}</label>
+              <label :class="{ active: inputHighlights.has(channel) }">{{ channel }}</label>
               <input
                 type="checkbox"
                 :value="channel"
@@ -232,7 +232,7 @@ onUnmounted(() => {
           <div class="control channels-wrapper">
             <label>Output channels</label>
             <span v-for="channel in 16" :key="channel">
-              <label>{{ ' ' + channel + ' ' }}</label>
+              <label>{{ channel }}</label>
               <input
                 type="checkbox"
                 :value="channel"

From cef0575fb7d6538846b6f146108761b45c98410a Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 23:21:52 +0200
Subject: [PATCH 3/6] eliminated unneeded blank spaces and changed label css

---
 src/assets/main.css                           | 16 +++++--------
 src/components/ScaleControls.vue              |  6 ++---
 .../modals/generation/ConcordanceShell.vue    |  4 ++--
 .../modals/generation/HistoricalScale.vue     | 18 +++++++-------
 src/components/modals/generation/MosScale.vue | 24 +++++++++----------
 src/components/modals/generation/RankTwo.vue  | 22 ++++++++---------
 .../modals/generation/SpanLattice.vue         | 12 +++++-----
 .../modification/ApproximateByRatios.vue      |  6 ++---
 .../modification/CoalesceDuplicates.vue       | 12 +++++-----
 .../modals/modification/EqualizeScale.vue     |  4 ++--
 .../modals/modification/ExpandScale.vue       |  4 ++--
 .../modals/modification/MergeOffsets.vue      |  6 ++---
 .../modals/modification/RandomVariance.vue    |  2 +-
 .../modals/modification/TemperScale.vue       | 12 +++++-----
 src/views/AnalysisView.vue                    | 20 ++++++++--------
 src/views/LatticeView.vue                     | 20 ++++++++--------
 src/views/MidiView.vue                        |  8 +++----
 src/views/PreferencesView.vue                 | 10 ++++----
 src/views/SynthView.vue                       | 16 ++++++-------
 19 files changed, 109 insertions(+), 113 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 536ae780..9c8a6f15 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -36,16 +36,6 @@ code {
   border-right: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
 }
-label.right-of-checkbox{
-  margin-left: 0.1rem;
-  text-align: left;
-  vertical-align: baseline;
-}
-label.right-of-radio{
-  margin-left: 0.25rem;
-  text-align: left;
-  vertical-align: baseline;
-}
 
 /* UI elements */
 input[type='text'],
@@ -156,12 +146,18 @@ ul.btn-group {
 }
 .control.checkbox-container label {
   font-weight: normal;
+  margin-left: 0.2rem;
+  text-align: left;
+  vertical-align: baseline;
 }
 .control.radio-group {
   gap: 0rem 1rem;
 }
 .control.radio-group span label {
   font-weight: unset;
+  margin-left: 0.35rem;
+  text-align: left;
+  vertical-align: baseline;
 }
 
 /* Responding to screen size */
diff --git a/src/components/ScaleControls.vue b/src/components/ScaleControls.vue
index de5c8d6e..81cce1b6 100644
--- a/src/components/ScaleControls.vue
+++ b/src/components/ScaleControls.vue
@@ -87,7 +87,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-silver" class="right-of-radio">Silver</label>
+        <label for="colors-silver">Silver</label>
       </span>
 
       <span>
@@ -98,7 +98,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-cents" class="right-of-radio">Cents</label>
+        <label for="colors-cents">Cents</label>
       </span>
 
       <span>
@@ -109,7 +109,7 @@ defineExpose({ focus, clearPaletteInfo })
           v-model="scale.autoColors"
           @input="updateScale"
         />
-        <label for="colors-factors" class="right-of-radio">Factors</label>
+        <label for="colors-factors">Factors</label>
       </span>
     </div>
   </div>
diff --git a/src/components/modals/generation/ConcordanceShell.vue b/src/components/modals/generation/ConcordanceShell.vue
index eac310e8..601f91fe 100644
--- a/src/components/modals/generation/ConcordanceShell.vue
+++ b/src/components/modals/generation/ConcordanceShell.vue
@@ -111,11 +111,11 @@ function generate(shell = true, expand = true) {
           <label>Error model</label>
           <span>
             <input type="radio" id="error-rooted" value="rooted" v-model="modal.errorModel" />
-            <label for="error-rooted"> Rooted </label>
+            <label for="error-rooted">Rooted</label>
           </span>
           <span>
             <input type="radio" id="error-free" value="free" v-model="modal.errorModel" />
-            <label for="error-free"> Free </label>
+            <label for="error-free">Free</label>
           </span>
         </div>
         <div class="control">
diff --git a/src/components/modals/generation/HistoricalScale.vue b/src/components/modals/generation/HistoricalScale.vue
index 7f9b2a3c..4619cb00 100644
--- a/src/components/modals/generation/HistoricalScale.vue
+++ b/src/components/modals/generation/HistoricalScale.vue
@@ -186,7 +186,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.selectPreset(historical.selectedPreset)"
               />
-              <label for="method-simple"> Simple </label>
+              <label for="method-simple">Simple</label>
             </span>
 
             <span>
@@ -197,7 +197,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.down = 1"
               />
-              <label for="method-target"> Target </label>
+              <label for="method-target">Target</label>
             </span>
 
             <span>
@@ -208,7 +208,7 @@ function generate(expand = true) {
                 v-model="historical.method"
                 @input="historical.selectWellPreset(historical.selectedWellPreset)"
               />
-              <label for="method-well"> Well Temperament </label>
+              <label for="method-well">Well Temperament</label>
             </span>
           </div>
         </div>
@@ -243,11 +243,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
           <div class="control">
@@ -337,11 +337,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
         </div>
@@ -384,11 +384,11 @@ function generate(expand = true) {
             <label>Format</label>
             <span>
               <input id="format-cents" type="radio" value="cents" v-model="historical.format" />
-              <label for="format-cents"> cents</label>
+              <label for="format-cents">cents</label>
             </span>
             <span>
               <input id="format-default" type="radio" value="default" v-model="historical.format" />
-              <label for="format-default"> default</label>
+              <label for="format-default">default</label>
             </span>
           </div>
           <div class="control">
diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
index 608ca46c..d6a4d190 100644
--- a/src/components/modals/generation/MosScale.vue
+++ b/src/components/modals/generation/MosScale.vue
@@ -147,17 +147,17 @@ function edoClick(info: MosScaleInfo) {
         <div class="control radio-group">
           <span>
             <input type="radio" id="method-direct" value="direct" v-model="modal.method" />
-            <label for="method-direct"> Direct </label>
+            <label for="method-direct">Direct</label>
           </span>
 
           <span>
             <input type="radio" id="method-pyramid" value="pyramid" v-model="modal.method" />
-            <label for="method-pyramid"> Pyramid </label>
+            <label for="method-pyramid">Pyramid</label>
           </span>
 
           <span>
             <input type="radio" id="method-edo" value="edo" v-model="modal.method" />
-            <label for="method-edo"> EDO </label>
+            <label for="method-edo">EDO</label>
           </span>
         </div>
       </div>
@@ -215,45 +215,45 @@ function edoClick(info: MosScaleInfo) {
           <label>Generate key colors</label>
           <span>
             <input type="radio" id="color-none" value="none" v-model="modal.colorMethod" />
-            <label for="color-none"> Off </label>
+            <label for="color-none">Off</label>
           </span>
           <span>
             <input type="radio" id="color-parent" value="parent" v-model="modal.colorMethod" />
-            <label for="color-parent"> Parent MOS </label>
+            <label for="color-parent">Parent MOS</label>
           </span>
           <span>
             <input type="radio" id="color-daughter" value="daughter" v-model="modal.colorMethod" />
-            <label for="color-daughter"> Daughter MOS (expand scale) </label>
+            <label for="color-daughter">Daughter MOS (expand scale)</label>
           </span>
         </div>
         <div class="control radio-group" v-show="modal.colorMethod === 'parent'">
           <label>Black keys are</label>
           <span>
             <input type="radio" id="sharp" value="sharp" v-model="modal.parentColorAccidentals" />
-            <label for="sharp"> Sharp </label>
+            <label for="sharp">Sharp</label>
           </span>
           <span>
             <input type="radio" id="flat" value="flat" v-model="modal.parentColorAccidentals" />
-            <label for="flat"> Flat </label>
+            <label for="flat">Flat</label>
           </span>
         </div>
         <div class="control radio-group" v-show="modal.colorMethod === 'daughter'">
           <label>Accidentals to include</label>
           <span>
             <input type="radio" id="sharp" value="sharp" v-model="modal.daughterColorAccidentals" />
-            <label for="sharp"> Sharp </label>
+            <label for="sharp">Sharp</label>
           </span>
           <span>
             <input type="radio" id="flat" value="flat" v-model="modal.daughterColorAccidentals" />
-            <label for="flat"> Flat </label>
+            <label for="flat">Flat</label>
           </span>
           <span>
             <input type="radio" id="both" value="both" v-model="modal.daughterColorAccidentals" />
-            <label for="both"> Both </label>
+            <label for="both">Both</label>
           </span>
           <span>
             <input type="radio" id="all" value="all" v-model="modal.daughterColorAccidentals" />
-            <label for="all"> Full ET </label>
+            <label for="all">Full ET</label>
           </span>
         </div>
       </div>
diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
index 094f21ce..3e3799f4 100644
--- a/src/components/modals/generation/RankTwo.vue
+++ b/src/components/modals/generation/RankTwo.vue
@@ -184,22 +184,22 @@ function generate(expand = true) {
             <label>Method</label>
             <span>
               <input type="radio" id="method-generator" value="generator" v-model="rank2.method" />
-              <label for="method-generator"> Generator </label>
+              <label for="method-generator">Generator</label>
             </span>
 
             <span>
               <input type="radio" id="method-vals" value="vals" v-model="rank2.method" />
-              <label for="method-vals"> Vals </label>
+              <label for="method-vals">Vals</label>
             </span>
 
             <span>
               <input type="radio" id="method-commas" value="commas" v-model="rank2.method" />
-              <label for="method-commas"> Comma list </label>
+              <label for="method-commas">Comma list</label>
             </span>
 
             <span>
               <input type="radio" id="method-circle" value="circle" v-model="rank2.method" />
-              <label for="method-circle"> Circle</label>
+              <label for="method-circle">Circle</label>
             </span>
           </div>
         </div>
@@ -385,22 +385,22 @@ function generate(expand = true) {
             <label>Generate key colors</label>
             <span>
               <input type="radio" id="color-none" value="none" v-model="rank2.colorMethod" />
-              <label for="color-none"> Off </label>
+              <label for="color-none">Off</label>
             </span>
             <span>
               <input type="radio" id="color-gaps" value="gaps" v-model="rank2.colorMethod" />
-              <label for="color-gaps"> Fill gaps (expand scale) </label>
+              <label for="color-gaps">Fill gaps (expand scale)</label>
             </span>
           </div>
           <div class="control radio-group" v-show="rank2.colorMethod !== 'none'">
             <label>Black keys are</label>
             <span>
               <input type="radio" id="sharp" value="sharp" v-model="rank2.colorAccidentals" />
-              <label for="sharp"> Sharp </label>
+              <label for="sharp">Sharp</label>
             </span>
             <span>
               <input type="radio" id="flat" value="flat" v-model="rank2.colorAccidentals" />
-              <label for="flat"> Flat </label>
+              <label for="flat">Flat</label>
             </span>
           </div>
         </div>
@@ -417,17 +417,17 @@ function generate(expand = true) {
           <div class="control radio-group">
             <span>
               <input type="radio" id="tempering-TE" value="TE" v-model="rank2.tempering" />
-              <label for="tempering-TE"> TE </label>
+              <label for="tempering-TE">TE</label>
             </span>
 
             <span>
               <input type="radio" id="tempering-POTE" value="POTE" v-model="rank2.tempering" />
-              <label for="tempering-POTE"> POTE </label>
+              <label for="tempering-POTE">POTE</label>
             </span>
 
             <span>
               <input type="radio" id="tempering-CTE" value="CTE" v-model="rank2.tempering" />
-              <label for="tempering-CTE"> CTE </label>
+              <label for="tempering-CTE">CTE</label>
             </span>
           </div>
 
diff --git a/src/components/modals/generation/SpanLattice.vue b/src/components/modals/generation/SpanLattice.vue
index 46264119..1361ae81 100644
--- a/src/components/modals/generation/SpanLattice.vue
+++ b/src/components/modals/generation/SpanLattice.vue
@@ -109,17 +109,17 @@ function generate(expand = true) {
               value="generators"
               v-model="lattice.method"
             />
-            <label for="method-generators"> Generators </label>
+            <label for="method-generators">Generators</label>
           </span>
 
           <span>
             <input type="radio" id="method-vals" value="vals" v-model="lattice.method" />
-            <label for="method-vals"> Vals </label>
+            <label for="method-vals">Vals</label>
           </span>
 
           <span>
             <input type="radio" id="method-commas" value="commas" v-model="lattice.method" />
-            <label for="method-commas"> Comma list </label>
+            <label for="method-commas">Comma list</label>
           </span>
         </div>
         <div class="control-group" v-show="lattice.method === 'generators'">
@@ -201,17 +201,17 @@ function generate(expand = true) {
             <div class="control radio-group">
               <span>
                 <input type="radio" id="tempering-TE" value="TE" v-model="lattice.tempering" />
-                <label for="tempering-TE"> TE </label>
+                <label for="tempering-TE">TE</label>
               </span>
 
               <span>
                 <input type="radio" id="tempering-POTE" value="POTE" v-model="lattice.tempering" />
-                <label for="tempering-POTE"> POTE </label>
+                <label for="tempering-POTE">POTE</label>
               </span>
 
               <span>
                 <input type="radio" id="tempering-CTE" value="CTE" v-model="lattice.tempering" />
-                <label for="tempering-CTE"> CTE </label>
+                <label for="tempering-CTE">CTE</label>
               </span>
             </div>
 
diff --git a/src/components/modals/modification/ApproximateByRatios.vue b/src/components/modals/modification/ApproximateByRatios.vue
index 728396d7..c647a5a7 100644
--- a/src/components/modals/modification/ApproximateByRatios.vue
+++ b/src/components/modals/modification/ApproximateByRatios.vue
@@ -182,17 +182,17 @@ function modify(expand = true) {
               value="convergents"
               v-model="approx.method"
             />
-            <label for="method-convergents"> Convergents </label>
+            <label for="method-convergents">Convergents</label>
           </span>
 
           <span>
             <input type="radio" id="method-odd" value="odd" v-model="approx.method" />
-            <label for="method-odd"> Odd limit </label>
+            <label for="method-odd">Odd limit</label>
           </span>
 
           <span>
             <input type="radio" id="method-prime" value="prime" v-model="approx.method" />
-            <label for="method-prime"> Prime limit </label>
+            <label for="method-prime">Prime limit</label>
           </span>
         </div>
 
diff --git a/src/components/modals/modification/CoalesceDuplicates.vue b/src/components/modals/modification/CoalesceDuplicates.vue
index 456b7b78..ede92711 100644
--- a/src/components/modals/modification/CoalesceDuplicates.vue
+++ b/src/components/modals/modification/CoalesceDuplicates.vue
@@ -52,7 +52,7 @@ function modify(expand = true) {
               value="simplest"
               v-model="modal.coalescingAction"
             />
-            <label for="action-simplest"> Simplest </label>
+            <label for="action-simplest">Simplest</label>
           </span>
 
           <span>
@@ -62,7 +62,7 @@ function modify(expand = true) {
               value="lowest"
               v-model="modal.coalescingAction"
             />
-            <label for="action-lowest"> Lowest </label>
+            <label for="action-lowest">Lowest</label>
           </span>
 
           <span>
@@ -72,16 +72,16 @@ function modify(expand = true) {
               value="highest"
               v-model="modal.coalescingAction"
             />
-            <label for="action-highest"> Highest </label>
+            <label for="action-highest">Highest</label>
           </span>
           <label>Replace with (which) average</label>
           <span>
             <input type="radio" id="action-avg" value="avg" v-model="modal.coalescingAction" />
-            <label for="action-avg"> Arithmetic </label>
+            <label for="action-avg">Arithmetic</label>
           </span>
           <span>
             <input type="radio" id="action-havg" value="havg" v-model="modal.coalescingAction" />
-            <label for="action-havg"> Harmonic </label>
+            <label for="action-havg">Harmonic</label>
           </span>
           <span>
             <input
@@ -90,7 +90,7 @@ function modify(expand = true) {
               value="geoavg"
               v-model="modal.coalescingAction"
             />
-            <label for="action-geoavg"> Geometric </label>
+            <label for="action-geoavg">Geometric</label>
           </span>
         </div>
       </div>
diff --git a/src/components/modals/modification/EqualizeScale.vue b/src/components/modals/modification/EqualizeScale.vue
index 74a8808a..8af8eb65 100644
--- a/src/components/modals/modification/EqualizeScale.vue
+++ b/src/components/modals/modification/EqualizeScale.vue
@@ -73,11 +73,11 @@ function modify(expand = true) {
           <label>Error model</label>
           <span>
             <input type="radio" id="error-rooted" value="rooted" v-model="modal.errorModel" />
-            <label for="error-rooted"> Rooted </label>
+            <label for="error-rooted">Rooted</label>
           </span>
           <span>
             <input type="radio" id="error-free" value="free" v-model="modal.errorModel" />
-            <label for="error-free"> Free </label>
+            <label for="error-free">Free</label>
           </span>
         </div>
         <p>Error: {{ equalizedScaleData.error.toFixed(5) }} c</p>
diff --git a/src/components/modals/modification/ExpandScale.vue b/src/components/modals/modification/ExpandScale.vue
index 5bde53a0..a3fe5eea 100644
--- a/src/components/modals/modification/ExpandScale.vue
+++ b/src/components/modals/modification/ExpandScale.vue
@@ -32,11 +32,11 @@ function modify() {
         <p>Expand your scale to individual lines.</p>
         <div class="control checkbox-container">
           <input type="checkbox" id="simplify" v-model="modal.simplify" />
-          <label for="simplify"> Remove formatting</label>
+          <label for="simplify">Remove formatting</label>
         </div>
         <div class="control checkbox-container">
           <input type="checkbox" id="bleach" v-model="modal.bleach" />
-          <label for="bleach"> Remove colors and labels</label>
+          <label for="bleach">Remove colors and labels</label>
         </div>
       </div>
     </template>
diff --git a/src/components/modals/modification/MergeOffsets.vue b/src/components/modals/modification/MergeOffsets.vue
index adc6a8b9..0c2beb6f 100644
--- a/src/components/modals/modification/MergeOffsets.vue
+++ b/src/components/modals/modification/MergeOffsets.vue
@@ -50,17 +50,17 @@ function modify(expand = true) {
           <label>Overflow</label>
           <span>
             <input type="radio" id="overflow-keep" value="keep" v-model="modal.overflowType" />
-            <label for="overflow-keep"> Keep </label>
+            <label for="overflow-keep">Keep</label>
           </span>
 
           <span>
             <input type="radio" id="overflow-drop" value="drop" v-model="modal.overflowType" />
-            <label for="overflow-drop"> Drop </label>
+            <label for="overflow-drop">Drop</label>
           </span>
 
           <span>
             <input type="radio" id="overflow-wrap" value="wrap" v-model="modal.overflowType" />
-            <label for="overflow-wrap"> Wrap </label>
+            <label for="overflow-wrap">Wrap</label>
           </span>
         </div>
       </div>
diff --git a/src/components/modals/modification/RandomVariance.vue b/src/components/modals/modification/RandomVariance.vue
index 20f2587a..456f7e3f 100644
--- a/src/components/modals/modification/RandomVariance.vue
+++ b/src/components/modals/modification/RandomVariance.vue
@@ -47,7 +47,7 @@ function modify(expand = true) {
         </div>
         <div class="control checkbox-container">
           <input id="vary-equave" type="checkbox" v-model="modal.varyEquave" />
-          <label for="vary-equave"> Vary the {{ equave }}</label>
+          <label for="vary-equave">Vary the {{ equave }}</label>
         </div>
       </div>
     </template>
diff --git a/src/components/modals/modification/TemperScale.vue b/src/components/modals/modification/TemperScale.vue
index 5de3c4e9..3457f814 100644
--- a/src/components/modals/modification/TemperScale.vue
+++ b/src/components/modals/modification/TemperScale.vue
@@ -94,7 +94,7 @@ function modify(expand = true) {
                 @focus="temper.error = ''"
                 v-model="temper.method"
               />
-              <label for="method-mapping"> Mapping </label>
+              <label for="method-mapping">Mapping</label>
             </span>
             <span>
               <input
@@ -104,7 +104,7 @@ function modify(expand = true) {
                 @focus="temper.error = ''"
                 v-model="temper.method"
               />
-              <label for="method-vals"> Vals </label>
+              <label for="method-vals">Vals</label>
             </span>
 
             <span>
@@ -115,7 +115,7 @@ function modify(expand = true) {
                 @focus="temper.error = ''"
                 v-model="temper.method"
               />
-              <label for="method-commas"> Comma list </label>
+              <label for="method-commas">Comma list</label>
             </span>
           </div>
 
@@ -196,7 +196,7 @@ function modify(expand = true) {
                 @focus="temper.error = ''"
                 v-model="temper.tempering"
               />
-              <label for="tempering-TE"> TE </label>
+              <label for="tempering-TE">TE</label>
             </span>
 
             <span>
@@ -207,7 +207,7 @@ function modify(expand = true) {
                 @focus="temper.error = ''"
                 v-model="temper.tempering"
               />
-              <label for="tempering-POTE"> POTE </label>
+              <label for="tempering-POTE">POTE</label>
             </span>
 
             <span>
@@ -219,7 +219,7 @@ function modify(expand = true) {
                 :disabled="!temper.constraintsAvailable"
                 v-model="temper.tempering"
               />
-              <label for="tempering-CTE"> CTE </label>
+              <label for="tempering-CTE">CTE</label>
             </span>
           </div>
 
diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
index c3934e5b..9cda881d 100644
--- a/src/views/AnalysisView.vue
+++ b/src/views/AnalysisView.vue
@@ -230,17 +230,17 @@ function highlight(y?: number, x?: number) {
         <label>Display intervals in matrix as</label>
         <span>
           <input type="radio" id="format-best" value="best" v-model="cellFormat" />
-          <label for="format-best" class="right-of-radio">Default</label>
+          <label for="format-best">Default</label>
         </span>
 
         <span>
           <input type="radio" id="format-cents" value="cents" v-model="cellFormat" />
-          <label for="format-cents" class="right-of-radio">Cents</label>
+          <label for="format-cents">Cents</label>
         </span>
 
         <span>
           <input type="radio" id="format-decimal" value="decimal" v-model="cellFormat" />
-          <label for="format-decimal" class="right-of-radio">Decimal ratio</label>
+          <label for="format-decimal">Decimal ratio</label>
         </span>
       </div>
     </div>
@@ -252,12 +252,12 @@ function highlight(y?: number, x?: number) {
         <label>Interval indexing</label>
         <span>
           <input type="radio" id="indexing-zero" value="0" v-model="intervalMatrixIndexingRadio" />
-          <label for="indexing-zero"> 0-indexing (default) </label>
+          <label for="indexing-zero">0-indexing (default)</label>
         </span>
 
         <span>
           <input type="radio" id="indexing-one" value="1" v-model="intervalMatrixIndexingRadio" />
-          <label for="indexing-one"> 1-indexing </label>
+          <label for="indexing-one">1-indexing</label>
         </span>
       </div>
       <div class="control">
@@ -276,7 +276,7 @@ function highlight(y?: number, x?: number) {
           type="checkbox"
           v-model="state.calculateConstantStructureViolations"
         />
-        <label for="calculate-violators"> Show constant structure violations</label>
+        <label for="calculate-violators">Show constant structure violations</label>
       </div>
       <div class="control">
         <label for="cs-margin">Constant structure margin in cents</label>
@@ -284,11 +284,11 @@ function highlight(y?: number, x?: number) {
       </div>
       <div class="control checkbox-container">
         <input id="calculate-variety" type="checkbox" v-model="state.calculateVariety" />
-        <label for="calculate-variety"> Show variety signature</label>
+        <label for="calculate-variety">Show variety signature</label>
       </div>
       <div class="control checkbox-container">
         <input id="calculate-brightness" type="checkbox" v-model="state.calculateBrightness" />
-        <label for="calculate-brightness"> Show mode brightness</label>
+        <label for="calculate-brightness">Show mode brightness</label>
       </div>
     </div>
     <div class="columns-container">
@@ -383,11 +383,11 @@ function highlight(y?: number, x?: number) {
             <label>Error model</label>
             <span>
               <input type="radio" id="error-rooted" value="rooted" v-model="errorModel" />
-              <label for="error-rooted" class="right-of-radio">Rooted</label>
+              <label for="error-rooted">Rooted</label>
             </span>
             <span>
               <input type="radio" id="error-free" value="free" v-model="errorModel" />
-              <label for="error-free" class="right-of-radio">Free</label>
+              <label for="error-free">Free</label>
             </span>
           </div>
         </div>
diff --git a/src/views/LatticeView.vue b/src/views/LatticeView.vue
index f3dba428..428df404 100644
--- a/src/views/LatticeView.vue
+++ b/src/views/LatticeView.vue
@@ -123,11 +123,11 @@ watch(etPreset, (newValue) => {
             <label>Lattice type</label>
             <span>
               <input type="radio" id="ji" value="ji" v-model="state.latticeType" />
-              <label for="ji"> Just intonation </label>
+              <label for="ji">Just intonation</label>
             </span>
             <span>
               <input type="radio" id="et" value="et" v-model="state.latticeType" />
-              <label for="et"> Equal temperament </label>
+              <label for="et">Equal temperament</label>
             </span>
           </div>
           <template v-if="state.latticeType === 'ji'">
@@ -162,15 +162,15 @@ watch(etPreset, (newValue) => {
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="show-labels" v-model="jiLattice.showLabels" />
-              <label for="show-labels"> Show labels</label>
+              <label for="show-labels">Show labels</label>
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="draw-arrows" v-model="jiLattice.drawArrows" />
-              <label for="draw-arrows"> Indicate order w/ arrows</label>
+              <label for="draw-arrows">Indicate order w/ arrows</label>
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="gray-extras" v-model="jiLattice.grayExtras" />
-              <label for="gray-extras"> Gray extra edges</label>
+              <label for="gray-extras">Gray extra edges</label>
             </div>
             <div class="control">
               <label for="extra-edges">Extra edges</label>
@@ -251,19 +251,19 @@ watch(etPreset, (newValue) => {
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="gridlines-1" v-model="grid.gridlines1" />
-              <label for="gridlines-1"> Gridlines 1</label>
+              <label for="gridlines-1">Gridlines 1</label>
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="gridlines-2" v-model="grid.gridlines2" />
-              <label for="gridlines-2"> Gridlines 2</label>
+              <label for="gridlines-2">Gridlines 2</label>
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="diagonals-1" v-model="grid.diagonals1" />
-              <label for="diagonals-1"> Diagonals 1</label>
+              <label for="diagonals-1">Diagonals 1</label>
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="diagonals-2" v-model="grid.diagonals2" />
-              <label for="diagonals-2"> Diagonals 2</label>
+              <label for="diagonals-2">Diagonals 2</label>
             </div>
             <div class="control">
               <label for="size">Text size</label>
@@ -275,7 +275,7 @@ watch(etPreset, (newValue) => {
             </div>
             <div class="control checkbox-container">
               <input type="checkbox" id="show-labels" v-model="grid.showLabels" />
-              <label for="show-labels"> Show labels</label>
+              <label for="show-labels">Show labels</label>
             </div>
             <div class="control">
               <label for="view-scale">View scale</label>
diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index 4cd46cbd..30720df8 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -184,19 +184,19 @@ onUnmounted(() => {
             <label>Color mapping</label>
             <span>
               <input type="radio" id="white-off" value="off" v-model="midi.whiteMode" />
-              <label for="white-off" class="right-of-radio">Chromatic</label>
+              <label for="white-off">Chromatic</label>
             </span>
             <span>
               <input type="radio" id="white-simple" value="simple" v-model="midi.whiteMode" />
-              <label for="white-simple" class="right-of-radio">White only</label>
+              <label for="white-simple">White only</label>
             </span>
             <span>
               <input type="radio" id="white-black" value="blackAverage" v-model="midi.whiteMode" />
-              <label for="white-black" class="right-of-radio">White w/ interpolation</label>
+              <label for="white-black">White w/ interpolation</label>
             </span>
             <span>
               <input type="radio" id="white-color" value="keyColors" v-model="midi.whiteMode" />
-              <label for="white-color" class="right-of-radio">White key to white color</label>
+              <label for="white-color">White key to white color</label>
             </span>
           </div>
         </div>
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index 2295987c..cd9240fe 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -53,11 +53,11 @@ const scale = useScaleStore()
           <div class="control radio-group">
             <span>
               <input type="radio" id="scheme-light" value="light" v-model="state.colorScheme" />
-              <label for="scheme-light" class="right-of-radio">Light </label>
+              <label for="scheme-light">Light</label>
             </span>
             <span>
               <input type="radio" id="scheme-dark" value="dark" v-model="state.colorScheme" />
-              <label for="scheme-dark" class="right-of-radio">Dark </label>
+              <label for="scheme-dark">Dark</label>
             </span>
           </div>
           <h3>Accidentals</h3>
@@ -69,7 +69,7 @@ const scale = useScaleStore()
                 value="double"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-double" class="right-of-radio">Double 𝄫/𝄪</label>
+              <label for="accidentals-double">Double 𝄫/𝄪</label>
             </span>
             <span>
               <input
@@ -78,7 +78,7 @@ const scale = useScaleStore()
                 value="single"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single" class="right-of-radio">Single ♭♭/♯♯</label>
+              <label for="accidentals-single">Single ♭♭/♯♯</label>
             </span>
             <span>
               <input
@@ -87,7 +87,7 @@ const scale = useScaleStore()
                 value="ASCII"
                 v-model="scale.accidentalPreference"
               />
-              <label for="accidentals-single" class="right-of-radio">ASCII bb/##</label>
+              <label for="accidentals-single">ASCII bb/##</label>
             </span>
           </div>
         </div>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index 79030248..76d6ec76 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -260,17 +260,17 @@ onUnmounted(() => {
                 value="oscillator"
                 v-model="audio.synthType"
               />
-              <label for="type-oscillator" class="right-of-radio">Oscillator</label>
+              <label for="type-oscillator">Oscillator</label>
             </span>
 
             <span>
               <input type="radio" id="type-unison" value="unison" v-model="audio.synthType" />
-              <label for="type-unison" class="right-of-radio">Unison</label>
+              <label for="type-unison">Unison</label>
             </span>
 
             <span>
               <input type="radio" id="type-aperiodic" value="aperiodic" v-model="audio.synthType" />
-              <label for="type-aperiodic" class="right-of-radio">Aperiodic</label>
+              <label for="type-aperiodic">Aperiodic</label>
             </span>
           </div>
           <template v-if="audio.synthType === 'unison'">
@@ -427,27 +427,27 @@ onUnmounted(() => {
                 value="isomorphic"
                 v-model="scale.keyboardMode"
               />
-              <label for="mode-isomorphic" class="right-of-radio">Isomorphic</label>
+              <label for="mode-isomorphic">Isomorphic</label>
             </span>
             <span>
               <input type="radio" id="mode-piano" value="piano" v-model="scale.keyboardMode" />
-              <label for="mode-piano" class="right-of-radio">Piano-style layers</label>
+              <label for="mode-piano">Piano-style layers</label>
             </span>
           </div>
           <template v-if="scale.keyboardMode === 'piano'">
             <div class="control radio-group">
               <span>
                 <input type="radio" id="mode-asdf" value="Asdf" v-model="scale.pianoMode" />
-                <label for="mode-asdf" class="right-of-radio">White on ASDF & black on QWERTY</label>
+                <label for="mode-asdf">White on ASDF & black on QWERTY</label>
               </span>
               <span>
                 <input type="radio" id="mode-qwe-zxc" value="QweZxc" v-model="scale.pianoMode" />
-                <label for="mode-qwe-zxc" class="right-of-radio">QWERTY & digits + ZXCV & ASDF separated by an equave</label
+                <label for="mode-qwe-zxc">QWERTY & digits + ZXCV & ASDF separated by an equave</label
                 >
               </span>
               <span>
                 <input type="radio" id="mode-zxc" value="Zxc" v-model="scale.pianoMode" />
-                <label for="mode-zxc" class="right-of-radio">ZXCV with split accidentals above</label>
+                <label for="mode-zxc">ZXCV with split accidentals above</label>
               </span>
             </div>
           </template>

From 5013ab0ce71370b18a556bd8c3d1b5edf942eb46 Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 23:39:34 +0200
Subject: [PATCH 4/6] fixed spaces in MidiView

---
 src/views/MidiView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index d1fe3a3f..813a20b8 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -179,11 +179,11 @@ onUnmounted(() => {
           <div class="control checkbox-group">
             <div>
               <input type="checkbox" id="midi-velocity" v-model="midi.velocityOn" />
-              <label for="midi-velocity"> Use velocity </label>
+              <label for="midi-velocity">Use velocity</label>
             </div>
             <div>
               <input type="checkbox" id="multichannel" v-model="midi.multichannelToEquave" />
-              <label for="multichannel"> Multichannel-to-equave </label>
+              <label for="multichannel">Multichannel-to-equave</label>
             </div>
           </div>
           <label>Settings for multichannel-to-equave mode</label>

From 6b8ca9ca24450a80e573b094eac1b2166eed218f Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 23:41:07 +0200
Subject: [PATCH 5/6] ran npm run format

---
 src/assets/main.css           | 7 +++----
 src/views/PreferencesView.vue | 4 +++-
 src/views/SynthView.vue       | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 9c8a6f15..6ac709b6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -50,9 +50,8 @@ select {
   width: 6rem;
   line-height: var(--base-line-height);
 }
-input[type='radio']
- {
-  vertical-align: -0.05rem
+input[type='radio'] {
+  vertical-align: -0.05rem;
 }
 optgroup {
   font-weight: bold;
@@ -142,7 +141,7 @@ ul.btn-group {
   flex-grow: 0.25 !important;
 }
 .control.checkbox-container {
-  flex-flow: unset;;
+  flex-flow: unset;
 }
 .control.checkbox-container label {
   font-weight: normal;
diff --git a/src/views/PreferencesView.vue b/src/views/PreferencesView.vue
index cd9240fe..f26a6355 100644
--- a/src/views/PreferencesView.vue
+++ b/src/views/PreferencesView.vue
@@ -31,7 +31,9 @@ const scale = useScaleStore()
         <div class="control-group">
           <div class="control checkbox-container">
             <input id="has-left-of-z" type="checkbox" v-model="scale.hasLeftOfZ" />
-            <label for="has-left-of-z" class="right-of-checkbox">There's a key between left Shift and 'Z'</label>
+            <label for="has-left-of-z" class="right-of-checkbox"
+              >There's a key between left Shift and 'Z'</label
+            >
           </div>
         </div>
         <h2>Advanced</h2>
diff --git a/src/views/SynthView.vue b/src/views/SynthView.vue
index 76d6ec76..53f54839 100644
--- a/src/views/SynthView.vue
+++ b/src/views/SynthView.vue
@@ -442,7 +442,8 @@ onUnmounted(() => {
               </span>
               <span>
                 <input type="radio" id="mode-qwe-zxc" value="QweZxc" v-model="scale.pianoMode" />
-                <label for="mode-qwe-zxc">QWERTY & digits + ZXCV & ASDF separated by an equave</label
+                <label for="mode-qwe-zxc"
+                  >QWERTY & digits + ZXCV & ASDF separated by an equave</label
                 >
               </span>
               <span>

From 16737835545e359e78a0a2bdbd6fd140665671b6 Mon Sep 17 00:00:00 2001
From: Marc Sabat <masa@plainsound.org>
Date: Tue, 16 Apr 2024 23:47:51 +0200
Subject: [PATCH 6/6] MidiView scoped style for checkbox-group label

---
 src/views/MidiView.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/views/MidiView.vue b/src/views/MidiView.vue
index 813a20b8..af6cd13b 100644
--- a/src/views/MidiView.vue
+++ b/src/views/MidiView.vue
@@ -333,6 +333,13 @@ div.checkbox-group {
   gap: 0.15rem 1rem;
 }
 
+div.checkbox-group label{
+  font-weight: normal;
+  margin-left: 0.35rem;
+  text-align: left;
+  vertical-align: baseline;
+}
+
 div.multichannel-input-container {
   gap: 0.15rem 1rem;
 }