fix(CodeColor, LayeredColorsSelect): fix invalid DOM nesting (#2963)

Author: averyjohnston

src/components/page/theming/CodeColor/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.scss';
 
 function CodeColor({ color, ...props }): JSX.Element {
   return (
-    <div className={clsx(styles.codeColor, props.className, 'code-color')}>
+    <span className={clsx(styles.codeColor, props.className, 'code-color')}>
       <span
         className={styles.codeColorBlock}
         style={{
@@ -14,7 +14,7 @@ function CodeColor({ color, ...props }): JSX.Element {
         }}
       />
       {props.children && <code className={styles.codeColorValue}>{props.children}</code>}
-    </div>
+    </span>
   );
 }
 

src/components/page/theming/LayeredColorsSelect/index.tsx

@@ -83,28 +83,32 @@ export default function LayeredColorsSelect({ ...props }) {
         </InputWrapper>
       </div>
       <table>
-        <tr>
-          <th>Name</th>
-          <th>Property</th>
-          <th>Default Value</th>
-          <th>Description</th>
-        </tr>
-        {variations.map((variation) => {
-          const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Property</th>
+            <th>Default Value</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {variations.map((variation) => {
+            const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
 
-          return (
-            <tr key={variation.name}>
-              <td className={styles.colorName}>{variation.name}</td>
-              <td className={styles.colorProperty}>
-                <code>{variation.property}</code>
-              </td>
-              <td className={styles.colorValue}>
-                <CodeColor color={codeColor}>{variation.value}</CodeColor>
-              </td>
-              <td className={styles.colorDescription}>{variation.description}</td>
-            </tr>
-          );
-        })}
+            return (
+              <tr key={variation.name}>
+                <td className={styles.colorName}>{variation.name}</td>
+                <td className={styles.colorProperty}>
+                  <code>{variation.property}</code>
+                </td>
+                <td className={styles.colorValue}>
+                  <CodeColor color={codeColor}>{variation.value}</CodeColor>
+                </td>
+                <td className={styles.colorDescription}>{variation.description}</td>
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );