Show all actions as quick actions, if ActionBar only has 2 or less actions

dashboard/src/components/ActionBar.vue

@@ -11,7 +11,14 @@ const props = defineProps({
 });
 
 const quickActions = computed(() => {
-  return props.actions.filter(a => a.quickAction && !(typeof a.visible !== 'undefined' && !a.visible));
+  const visibleActions = props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator);
+  if (visibleActions.length <= 2) return visibleActions;
+
+  return visibleActions.filter(a => a.quickAction);
+});
+
+const visibleActionCount = computed(() => {
+  return props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator).length;
 });
 
 const isMenuOpen = ref(false);
@@ -29,9 +36,9 @@ function onMenu(event) {
     <Menu ref="menuElement" :model="actions" @close="isMenuOpen = false" />
     <ButtonGroup class="quick-action-group">
       <Button tool v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" :href="quickAction.href || null" :target="quickAction.target || null" v-tooltip.top="quickAction.label"/>
-      <Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length"/>
+      <Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length"/>
     </ButtonGroup>
-    <Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length" class="menu-action" />
+    <Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length" class="menu-action" />
   </div>
 </template>
 
@@ -43,6 +50,7 @@ function onMenu(event) {
   justify-content: end;
   min-height: 31px;
   align-items: center;
+  min-width: 55px;
 }
 
 .menu-action {
@@ -56,6 +64,7 @@ function onMenu(event) {
 .action-bar .quick-action-group .pankow-button {
   background-color: white;
   color: var(--pankow-color-text);
+  border: 1px solid transparent;
 }
 
 .action-bar .quick-action-group .pankow-button:hover {

dashboard/src/components/ApiTokens.vue

@@ -45,7 +45,9 @@ const columns = {
       return moment(a).isBefore(b) ? 1 : -1;
     }
   },
-  actions: {},
+  actions: {
+    width: '55px',
+  },
 };
 
 function createActionMenu(apiToken) {