increase max width in rules page, catch typos in variant prop

packages/vue-client/src/views/RulesView.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { getRulesDescription } from "@ogfcommunity/variants-shared";
+import {
+  getRulesDescription,
+  getVariantList,
+} from "@ogfcommunity/variants-shared";
 import { computed } from "vue";
 import VariantDemoView from "./VariantDemoView.vue";
 
 const props = defineProps<{ variant: string }>();
 
 const rulesDescription = computed(() => getRulesDescription(props.variant));
 
+const variantExists = computed(() => getVariantList().includes(props.variant));
+
 function toUpperCaseFirstLetter(string: string) {
   if (string.length === 0) {
     return "";
@@ -18,26 +23,30 @@ function toUpperCaseFirstLetter(string: string) {
 
 <template>
   <main>
-    <div class="grid-page-layout">
+    <div v-if="!variantExists">Sorry, variant not found.</div>
+    <div v-if="variantExists" class="grid-page-layout">
+      <div>
+        <h1>{{ toUpperCaseFirstLetter(props.variant) }} Variant Rules</h1>
+        <p v-if="!rulesDescription">Under Construction</p>
+        <div v-if="rulesDescription" v-html="rulesDescription"></div>
+      </div>
       <div>
-        <div class="rules-page">
-          <h1>{{ toUpperCaseFirstLetter(props.variant) }} Variant Rules</h1>
-          <p v-if="!rulesDescription">Under Construction</p>
-          <div v-if="rulesDescription" v-html="rulesDescription"></div>
-        </div>
-        <div>
-          <h1>Demo</h1>
-          <VariantDemoView v-bind:variant="variant" />
-        </div>
+        <h1>Demo</h1>
+        <VariantDemoView v-bind:variant="variant" />
       </div>
     </div>
   </main>
 </template>
 
 <style scoped>
-.rules-page {
+main {
   font-family: "helvetica", "arial", "sans-serif";
 }
+
+.grid-page-layout {
+  max-width: none;
+}
+
 :deep(strong, h1, h2) {
   font-weight: bold;
 }