Add small animation for workflow cards

#37

src/components/transitions/CardTransitionGroup.vue

+<script setup lang="ts">
+defineProps({
+  tag: { type: String, required: false, default: "div" },
+});
+</script>
+
+<template>
+  <transition-group name="card" :tag="tag">
+    <slot></slot>
+  </transition-group>
+</template>
+
+<style>
+.card-move, /* apply transition to moving elements */
+.card-enter-active,
+.card-leave-active {
+  transition: all 0.5s ease;
+}
+
+.card-enter-from,
+.card-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.card-leave-active {
+  position: absolute;
+}
+</style>

src/components/transitions/ListTransitionGroup.vue

+<script setup lang="ts">
+defineProps({
+  tag: { type: String, required: false, default: "div" },
+});
+</script>
+
+<template>
+  <transition-group name="list" :tag="tag">
+    <slot></slot>
+  </transition-group>
+</template>
+
+<style>
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  transform: rotateX(90deg);
+  transform-origin: center top;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>

src/views/object-storage/S3KeysView.vue

@@ -139,7 +139,7 @@ onMounted(() => {
         <button
           v-for="(s3key, index) in keyState.keys"
           :key="s3key.access_key"
-          class="btn w-100 fs-5 mb-3"
+          class="btn w-100 fs-5 mb-3 text-truncate"
           type="button"
           @click="keyState.activeKey = index"
           :class="{

src/views/workflows/ListWorkflowsView.vue

@@ -4,6 +4,7 @@ import type { ComputedRef } from "vue";
 import { useWorkflowStore } from "@/stores/workflows";
 import type { WorkflowOut } from "@/client/workflow";
 import WorkflowCard from "@/components/workflows/WorkflowCard.vue";
+import CardTransitionGroup from "@/components/transitions/CardTransitionGroup.vue";
 import dayjs from "dayjs";
 import BootstrapIcon from "@/components/BootstrapIcon.vue";
 
@@ -155,7 +156,7 @@ onMounted(() => {
         workflowsState.filterString
       }}'
     </div>
-    <div
+    <CardTransitionGroup
       v-else
       class="d-flex flex-wrap align-items-center justify-content-between"
     >
@@ -165,7 +166,7 @@ onMounted(() => {
         :workflow="workflow"
         :loading="false"
       />
-    </div>
+    </CardTransitionGroup>
   </div>
   <div
     v-else