From 0dfda4b0a64c16fef114d09eba0468690b6c4b7e Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Wed, 11 Dec 2024 14:53:32 +0200
Subject: [PATCH] Add missing thead and tbody tags

ref #828
---
 src/components/VirtualKeyboard.vue | 56 +++++++++--------
 src/views/AnalysisView.vue         | 98 ++++++++++++++++--------------
 2 files changed, 82 insertions(+), 72 deletions(-)

diff --git a/src/components/VirtualKeyboard.vue b/src/components/VirtualKeyboard.vue
index e9184a4c..4c773612 100644
--- a/src/components/VirtualKeyboard.vue
+++ b/src/components/VirtualKeyboard.vue
@@ -69,33 +69,35 @@ const isMousePressed = ref(false)
 
 <template>
   <table>
-    <tr v-for="[y, row] of virtualKeys" :key="y" :class="{ 'hidden-sm': y < 0 || y > 3 }">
-      <VirtualKeyboardKey
-        v-for="key of row"
-        :key="key.x"
-        :class="{
-          'hidden-sm': key.x > 8,
-          held: (heldNotes.get(key.index) || 0) > 0
-        }"
-        :index="key.index"
-        :color="key.color"
-        :isMousePressed="isMousePressed"
-        :noteOn="() => noteOn(key.index)"
-        @press="isMousePressed = true"
-        @unpress="isMousePressed = false"
-      >
-        <VirtualKeyInfo
-          :label="key.label"
-          :cents="key.cents"
-          :ratio="key.ratio"
-          :frequency="key.frequency"
-          :showLabel="props.showLabel"
-          :showCents="props.showCents"
-          :showRatio="props.showRatio"
-          :showFrequency="props.showFrequency"
-        />
-      </VirtualKeyboardKey>
-    </tr>
+    <tbody>
+      <tr v-for="[y, row] of virtualKeys" :key="y" :class="{ 'hidden-sm': y < 0 || y > 3 }">
+        <VirtualKeyboardKey
+          v-for="key of row"
+          :key="key.x"
+          :class="{
+            'hidden-sm': key.x > 8,
+            held: (heldNotes.get(key.index) || 0) > 0
+          }"
+          :index="key.index"
+          :color="key.color"
+          :isMousePressed="isMousePressed"
+          :noteOn="() => noteOn(key.index)"
+          @press="isMousePressed = true"
+          @unpress="isMousePressed = false"
+        >
+          <VirtualKeyInfo
+            :label="key.label"
+            :cents="key.cents"
+            :ratio="key.ratio"
+            :frequency="key.frequency"
+            :showLabel="props.showLabel"
+            :showCents="props.showCents"
+            :showRatio="props.showRatio"
+            :showFrequency="props.showFrequency"
+          />
+        </VirtualKeyboardKey>
+      </tr>
+    </tbody>
   </table>
 </template>
 
diff --git a/src/views/AnalysisView.vue b/src/views/AnalysisView.vue
index f1fb82f7..8491c11e 100644
--- a/src/views/AnalysisView.vue
+++ b/src/views/AnalysisView.vue
@@ -321,41 +321,45 @@ const sSlider = computed({
       <h2>Interval matrix (modes)</h2>
       <div class="control-group interval-matrix">
         <table @mouseleave="highlight()">
-          <tr>
-            <th></th>
-            <th v-for="i of Math.min(scale.scale.size, state.maxMatrixWidth)" :key="i">
-              {{ i - 1 + state.intervalMatrixIndexing }}
-            </th>
-            <th>({{ scale.scale.size + state.intervalMatrixIndexing }})</th>
-            <th class="brightness" v-if="state.calculateBrightness">Bright %</th>
-          </tr>
-          <tr v-for="(row, i) of matrixRows" :key="i">
-            <th :class="{ held: heldScaleDegrees.has(i) }">
-              <template v-if="cellFormat === 'best'">
-                {{ scale.labels[mmod(i - 1, scale.labels.length)] }}
-              </template>
-              <template v-else>
-                {{ formatMatrixCell(i ? scale.relativeIntervals[i - 1] : UNISON) }}
-              </template>
-            </th>
-            <td
-              v-for="(name, j) of row"
-              :key="j"
-              :class="{
-                violator: state.calculateConstantStructureViolations && violations[i][j],
-                highlight: (highlights[i] ?? [])[j]
-              }"
-              @mouseover="highlight(i, j)"
-            >
-              {{ name }}
-            </td>
-            <td class="brightness" v-if="state.calculateBrightness">{{ brightness[i] }}</td>
-          </tr>
-          <tr class="variety" v-if="state.calculateVariety">
-            <th>Var</th>
-            <td v-for="(v, i) of variety" :key="i">{{ v }}</td>
-            <td class="brightness" v-if="state.calculateBrightness"></td>
-          </tr>
+          <thead>
+            <tr>
+              <th></th>
+              <th v-for="i of Math.min(scale.scale.size, state.maxMatrixWidth)" :key="i">
+                {{ i - 1 + state.intervalMatrixIndexing }}
+              </th>
+              <th>({{ scale.scale.size + state.intervalMatrixIndexing }})</th>
+              <th class="brightness" v-if="state.calculateBrightness">Bright %</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, i) of matrixRows" :key="i">
+              <th :class="{ held: heldScaleDegrees.has(i) }">
+                <template v-if="cellFormat === 'best'">
+                  {{ scale.labels[mmod(i - 1, scale.labels.length)] }}
+                </template>
+                <template v-else>
+                  {{ formatMatrixCell(i ? scale.relativeIntervals[i - 1] : UNISON) }}
+                </template>
+              </th>
+              <td
+                v-for="(name, j) of row"
+                :key="j"
+                :class="{
+                  violator: state.calculateConstantStructureViolations && violations[i][j],
+                  highlight: (highlights[i] ?? [])[j]
+                }"
+                @mouseover="highlight(i, j)"
+              >
+                {{ name }}
+              </td>
+              <td class="brightness" v-if="state.calculateBrightness">{{ brightness[i] }}</td>
+            </tr>
+            <tr class="variety" v-if="state.calculateVariety">
+              <th>Var</th>
+              <td v-for="(v, i) of variety" :key="i">{{ v }}</td>
+              <td class="brightness" v-if="state.calculateBrightness"></td>
+            </tr>
+          </tbody>
         </table>
       </div>
       <div class="control-group">
@@ -606,16 +610,20 @@ const sSlider = computed({
       </div>
       <div class="entropy-intervals">
         <table>
-          <tr>
-            <th>Label</th>
-            <th>Cents</th>
-            <th>Entropy %</th>
-          </tr>
-          <tr v-for="(cents, i) of centss" :key="i">
-            <td>{{ labels[i] }}</td>
-            <td>{{ cents.toFixed(scale.centsFractionDigits) }}</td>
-            <td>{{ (100 * entropy.entropyPercentage(cents)).toFixed(3) }}</td>
-          </tr>
+          <thead>
+            <tr>
+              <th>Label</th>
+              <th>Cents</th>
+              <th>Entropy %</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(cents, i) of centss" :key="i">
+              <td>{{ labels[i] }}</td>
+              <td>{{ cents.toFixed(scale.centsFractionDigits) }}</td>
+              <td>{{ (100 * entropy.entropyPercentage(cents)).toFixed(3) }}</td>
+            </tr>
+          </tbody>
         </table>
       </div>
     </main>