Minor responsive updates to the spell bar (#10580)

website/client/components/tasks/spells.vue

@@ -9,6 +9,7 @@ div(v-if='user.stats.lvl > 10')
       .col-4.mana
         .img(:class='`shop_${spell.key} shop-sprite item-img`')
 
+  .drawer-wrapper.d-flex.justify-content-center
     drawer(
       :title="$t('skillsTitle')",
       v-if='user.stats.class && !user.preferences.disableClasses',
@@ -20,7 +21,7 @@ div(v-if='user.stats.lvl > 10')
       div(slot="drawer-slider")
         .container.spell-container
           .row
-          .col-3(
+            .col-12.col-md-3(
               @click='castStart(skill)',
               v-for='(skill, key) in spells[user.stats.class]',
               v-if='user.stats.lvl >= skill.lvl',
@@ -37,8 +38,21 @@ div(v-if='user.stats.lvl > 10')
 </template>
 
 <style lang="scss" scoped>
+  .drawer-wrapper {
+    width: 100vw;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 19;
+
+    .drawer-container {
+      left: auto !important;
+      right: auto !important;
+      min-width: 60%;
+    }
+  }
+
   .drawer-container {
-    left: calc((100% - 978px) / 2);
   }
 
   .drawer-slider {