issue 107 and yaml

components/ResourceYaml.vue

@@ -279,14 +279,16 @@ export default {
             {{ schema.attributes.kind }}
           </nuxt-link>: {{ obj.id }}
         </span>
-        <span v-if="isPreview" v-trim-whitespace class="btn-group btn-xs mode">
-          <button type="button" :class="{'btn': true, 'btn-sm': true, 'bg-default': true, 'active': diffMode !== 'split'}" @click="diffMode='unified'">
-            <i class="icon icon-dot-open" />
-          </button>
-          <button type="button" :class="{'btn': true, 'btn-sm': true, 'bg-default': true, 'active': diffMode === 'split'}" @click="diffMode='split'">
-            <i class="icon icon-dot-half" />
-          </button>
-        </span>
+        <p>
+          <span v-if="isPreview" v-trim-whitespace class="btn-group btn-xs mode">
+            <button type="button" :class="{'btn': true, 'btn-xs': true, 'bg-default': true, 'active': diffMode !== 'split'}" @click="diffMode='unified'">
+              Unified
+            </button>
+            <button type="button" :class="{'btn': true, 'btn-xs': true, 'bg-default': true, 'active': diffMode === 'split'}" @click="diffMode='split'">
+              Split
+            </button>
+          </span>
+        </p>
       </h1>
       <div class="actions">
         <button v-if="!isView" type="button" class="btn bg-transparent" @click="cancel">

components/cru/rio.cattle.io.v1.service/index.vue

@@ -200,6 +200,7 @@ function matchingNamespaceGroupedByKey(ary, namespace) {
         :real-mode="realMode || mode"
         :is-demo="isDemo"
       />
+      <div class="spacer"></div>
       <a href="#" @click.prevent="toggleTabs">
         <span v-if="!showTabs">Show</span> <span v-else>Hide</span> additional options
       </a>

components/detail/rio.cattle.io.v1.service.vue

@@ -283,6 +283,8 @@ export default {
     & th{
       padding-bottom: 1rem;
       text-align: left;
+      font-weight: normal;
+      color: var(--secondary);
     }
 
     & :not(THEAD) tr{
@@ -319,7 +321,7 @@ export default {
       justify-content: flex-start;
 
       &:not(:last-child){
-      border-right: 1px solid var(--input-text);
+      border-right: 1px solid var(--border);
       }
 
       & >:not(:first-child){

components/nav/Type.vue

@@ -58,6 +58,7 @@ export default {
 
     &.nuxt-link-active {
       background-color: var(--nav-active);
+      padding-right: 10px;
       a {
         color: var(--lightest) !important;
       }

config/table-headers.js

@@ -55,7 +55,6 @@ export const NODE = {
   name:  'node',
   label: 'Node',
   value: 'spec.nodeName',
-  width: 75
 };
 
 export const AGE = {
@@ -66,7 +65,7 @@ export const AGE = {
   search:     false,
   formatter:  'LiveDate',
   width:      75,
-  align:     'right'
+  align:     'left'
 };
 
 export const RIO_IMAGE = {

layouts/default.vue

@@ -257,6 +257,10 @@ export default {
         grid-area: title;
         margin: 0;
         padding-top: 4px;
+
+        .nuxt-link-active {
+          padding-right: 10px;
+        }
       }
 
       .actions {