fix: styles issues

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": ["plugin:@empathyco/x/all"]
+  "extends": ["plugin:@empathyco/x/all"],
+  "rules": {
+    "vuejs-accessibility/no-autofocus": "off"
+  }
 }

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@empathyco/x-adapter": "^8.0.0-alpha.2",
-    "@empathyco/x-components": "^3.0.0-alpha.118",
+    "@empathyco/x-components": "^3.0.0-alpha.121",
     "@empathyco/x-adapter-platform": "^1.0.0-alpha.22",
     "@empathyco/x-deep-merge": "^1.3.0-alpha.19",
     "@empathyco/x-types": "^10.0.0-alpha.26",

src/components/column-picker.vue

@@ -10,13 +10,19 @@
 
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
-  import { BaseColumnPickerList, Grid1ColIcon, Grid2ColIcon } from '@empathyco/x-components';
+  import {
+    BaseColumnPickerList,
+    Grid1ColIcon,
+    Grid2ColIcon,
+    Grid4ColIcon
+  } from '@empathyco/x-components';
 
   @Component({
     components: {
       BaseColumnPickerList,
       Grid1ColIcon,
-      Grid2ColIcon
+      Grid2ColIcon,
+      Grid4ColIcon
     }
   })
   export default class ColumnPicker extends Vue {
@@ -28,7 +34,7 @@
       if (this.$x.device === 'mobile') {
         return column === 2 ? 'Grid2ColIcon' : 'Grid1ColIcon';
       } else {
-        return column === 4 ? 'Grid2ColIcon' : 'Grid1ColIcon';
+        return column === 4 ? 'Grid4ColIcon' : 'Grid2ColIcon';
       }
     }
   }

src/components/desktop/desktop-toolbar.vue

@@ -8,7 +8,7 @@
       v-html="
         $t('totalResults.message', { totalResults: $x.totalResults, query: $x.query.searchBox })
       "
-      class="x-list__item--expand"
+      class="x-list__item--expand x-font-size--05"
     />
 
     <ColumnPicker />

src/components/main.vue

@@ -7,6 +7,7 @@
         <div
           v-if="$x.totalResults === 0 || $x.spellcheckedQuery"
           class="x-padding--top-03 x-padding--bottom-07"
+          :class="{ 'x-margin--left-05 x-margin--right-05': $x.device === 'mobile' }"
         >
           <template>
             <SpellcheckMessage />

src/components/mobile/mobile-open-aside.vue

@@ -9,7 +9,7 @@
       v-if="$x.selectedFilters.length > 0"
       class="
         x-background--neutral-100
-        x-font-color--neutral-10
+        x-font-color--lead
         x-border-radius--20
         x-padding--01 x-padding--right-03 x-padding--left-03
       "

src/components/mobile/mobile-toolbar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="x-list x-list--horizontal x-list--align-center x-list__item--expand">
-    <span v-if="$x.totalResults" class="x-list__item--expand">
+    <span v-if="$x.totalResults" class="x-list__item--expand x-font-size--05">
       {{ $t('totalResults.message', { totalResults: $x.totalResults }) }}
     </span>
 
-    <ColumnPicker />
+    <ColumnPicker v-if="$x.totalResults" />
 
     <EnvSelector />
   </div>

src/components/mobile/mobile.vue

@@ -50,12 +50,14 @@
     </template>
 
     <template #floating>
-      <div class="x-row x-row--padding-03 x-row--justify-center x-list__item--expand">
+      <div class="x-row x-row--padding-03 x-list__item--expand x-margin--bottom-06">
         <MobileOpenAside
           v-if="$x.totalResults > 0"
           class="x-row__item x-row__item--start-4 x-row__item--span-6"
         />
-        <ScrollToTop class="x-row__item x-row__item--start-11 x-row__item--span-2" />
+        <div class="x-row__item--start-11 x-row__item--span-2 x-row__item x-padding--00">
+          <ScrollToTop class="x-row__item" />
+        </div>
       </div>
     </template>