fix: group and wrap tool change commands (#1543)

Signed-off-by: Pedro Lamas <[email protected]>

src/components/widgets/toolhead/ToolChangeCommands.vue

@@ -1,14 +1,18 @@
 <template>
   <v-row v-if="toolChangeCommands.length > 0">
-    <v-col>
+    <v-col
+      v-for="(toolChangeCommandsGroup, index2) in toolChangeCommandsGrouped"
+      :key="index2"
+      cols="12"
+    >
       <app-btn-group
         class="app-toolchanger-control d-flex"
         :class="{
           [$vuetify.theme.dark ? 'theme--dark': 'theme--light']: true,
         }"
       >
         <v-tooltip
-          v-for="(macro, index) of toolChangeCommands"
+          v-for="(macro, index) of toolChangeCommandsGroup"
           :key="index"
           top
         >
@@ -55,6 +59,7 @@ import StateMixin from '@/mixins/state'
 import type { GcodeCommands } from '@/store/printer/types'
 import type { TranslateResult } from 'vue-i18n'
 import type { Spool } from '@/store/spoolman/types'
+import { chunk } from 'lodash-es'
 
 type ToolChangeCommand = {
   name: string,
@@ -99,6 +104,14 @@ export default class ToolChangeCommands extends Mixins(StateMixin) {
       })
   }
 
+  get toolChangeCommandsGrouped (): ToolChangeCommand[][] {
+    const toolChangeCommands = this.toolChangeCommands
+
+    const cols = Math.ceil(toolChangeCommands.length / Math.ceil(toolChangeCommands.length / 6))
+
+    return chunk(toolChangeCommands, cols)
+  }
+
   getSpoolById (id: number): Spool | undefined {
     return this.$store.getters['spoolman/getSpoolById'](id)
   }