Fix card header expansion glitch on card collapse

This commit fixes an issue where the card's header would improperly
expand to full height during card collapse, leading to a less smooth
user experience. Previously, this was caused by the indiscriminate use
of `transition: all` in the `.card__expander`, which included unwanted
properties in the transition during collapse, such as height. This is
solved by using Vue transitions to apply transition only during
expansion.

Changes:

- Introduce a new Vue component, `CardExpandAnimation`:
  - Centralizes the animation process, applying the same animation to
    both the card and its arrow for consistency.
  - Resolves the glitch by adjusting classes exclusively during the
    enter animation phase, avoiding unintended side effects during leave
    animation phase.
  - Adopts a Vue-idiomatic approach for transition management, improving
    code readability and maintainability.
  - Improves separation of concerns by isolating animation logic from
    the component's core functionality, facilitating easier updates or
    replacements.
- Remove unnecessary transitions to enhance code simplicity and
  performance:
  - Remove `transition: all` on `.card__expander`, which was identified
    as the cause of the issue.
  - Remove unnecessary `transition: all` on `.card`.
  - Adjust transitions to specifically target and affect the transform
    property (instead of `all`) to optimize animation behavior and
    eliminate potential side-effects.

These changes not only fix the issue at hand but also contribute to a
more maintainable and performant codebase by clarifying animation logic
and reducing unnecessary CSS transitions.

src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue

@@ -8,7 +8,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
 });
 </script>
 

src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionSteps.vue

@@ -8,6 +8,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'InstructionSteps', // Define component name for empty component for Vue build and ESLint compatibility.
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
 });
 </script>