fix: #804 - cssClass on dashboard components

frontend/resources/vue/ActionButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :id="`actionButton-${actionId}`" role="none" class="action-button">
 		<button :id="`actionButtonInner-${actionId}`" :title="title" :disabled="!canExec || isDisabled"
-													  :class="buttonClasses" @click="handleClick">
+													  :class="combinedClasses" @click="handleClick">
 
 			<div class="navigate-on-start-container">
 				<div v-if="navigateOnStart == 'pop'" class="navigate-on-start" title="Opens a popup dialog on start">
@@ -29,7 +29,7 @@ import { useRouter } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { WorkoutRunIcon, TypeCursorIcon, ComputerTerminal01Icon } from '@hugeicons/core-free-icons'
 
-import { ref, watch, onMounted, inject } from 'vue'
+import { ref, watch, onMounted, inject, computed } from 'vue'
 
 const router = useRouter()
 const navigateOnStart = ref('')
@@ -38,6 +38,11 @@ const props = defineProps({
   actionData: {
 	type: Object,
 	required: true
+  },
+  cssClass: {
+	type: String,
+	required: false,
+	default: ''
   }
 })
 
@@ -57,6 +62,15 @@ const showArgumentForm = ref(false)
 // Animation classes
 const buttonClasses = ref([])
 
+// Combined classes including custom cssClass
+const combinedClasses = computed(() => {
+	const classes = [...buttonClasses.value]
+	if (props.cssClass) {
+		classes.push(props.cssClass)
+	}
+	return classes
+})
+
 // Timestamps
 const updateIterationTimestamp = ref(0)
 

frontend/resources/vue/Dashboard.vue

@@ -45,7 +45,7 @@
                     <span v-else>{{ component.title }}</span>
                 </h2>
 
-                <fieldset>
+                <fieldset :class="component.cssClass">
                     <template v-for="subcomponent in component.contents">
                         <DashboardComponent :component="subcomponent" />
                     </template>

frontend/resources/vue/components/DashboardComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <ActionButton v-if="component.type == 'link'" :actionData="component.action" :key="component.title" />
+    <ActionButton v-if="component.type == 'link'" :actionData="component.action" :cssClass="component.cssClass" :key="component.title" />
 
     <DashboardComponentDirectory v-else-if="component.type == 'directory'" :component="component" />
 

frontend/resources/vue/components/DashboardComponentDirectory.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="navigateToDirectory">
+    <button @click="navigateToDirectory" :class="component.cssClass">
         <span class="icon" v-html="unicodeIcon"></span>
         <span class="title">{{ component.title }}</span>
     </button>

frontend/resources/vue/components/DashboardComponentDisplay.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="display">
+    <div class="display" :class="component.cssClass">
         <div v-html="component.title" />
     </div>
 </template>

frontend/resources/vue/components/DashboardComponentMostRecentExecution.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mre-container">   
+  <div class="mre-container" :class="component.cssClass">   
     <router-link 
         v-if="executionTrackingId" 
         :to="`/logs/${executionTrackingId}`"