Config schema and docs text changes. Fix clickable tab area in dashboard/docs.

dashboard/src/components/Tab.vue

@@ -1,9 +1,36 @@
 <template>
-  <li class="py-2 px-4 hover:text-gray-200" :class="{'pb-1 border-b border-gray-400 text-gray-200': active, 'text-gray-500': !active}">
+  <li style="padding-bottom: 1px" :class="{active: active}">
     <slot></slot>
   </li>
 </template>
 
+<style scoped>
+  li {
+    padding-bottom: 1px;
+
+    &.active {
+      padding-bottom: 0;
+      @apply border-b;
+      @apply border-gray-400;
+    }
+  }
+
+  a {
+    @apply block;
+    @apply py-2;
+    @apply px-4;
+    @apply text-gray-500;
+
+    &:hover {
+      @apply text-gray-200;
+    }
+  }
+
+  .active a {
+    @apply text-gray-200;
+  }
+</style>
+
 <script lang="ts">
   export default {
     props: ["active"],

dashboard/src/components/docs/Plugin.vue

@@ -98,9 +98,7 @@
     <div class="configuration" v-if="tab === 'configuration'">
       <!-- Basic config info -->
       <p>
-        Name in config: <code>{{ data.name }}</code>
-      </p>
-      <p>
+        <strong>Name in config:</strong> <code>{{ data.name }}</code><br>
         To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
       </p>