opening a card scrolls to its content div

src/presentation/Scripts/Cards/CardListItem.vue

@@ -4,7 +4,8 @@
           v-bind:class="{ 
                     'is-collapsed': !isExpanded,
                     'is-inactive': activeCategoryId && activeCategoryId != categoryId,
-                    'is-expanded': isExpanded}">
+                    'is-expanded': isExpanded}"
+          ref="cardElement">
         <div class="card__inner">
           <span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span>
           <span v-else>Oh no 😢</span>
@@ -41,11 +42,18 @@ export default class CardListItem extends StatefulVue {
   public onSelected(isExpanded: boolean) {
     this.isExpanded = isExpanded;
   }
-
   @Watch('activeCategoryId')
   public async onActiveCategoryChanged(value: |number) {
     this.isExpanded = value === this.categoryId;
   }
+  @Watch('isExpanded')
+  public async onExpansionChangedAsync(newValue: number, oldValue: number) {
+    if (!oldValue && newValue) {
+      await new Promise((r) => setTimeout(r, 400));
+      const focusElement = this.$refs.cardElement as HTMLElement;
+      (focusElement as HTMLElement).scrollIntoView({behavior: 'smooth'});
+    }
+  }
 
   public async mounted() {
     this.cardTitle = this.categoryId ? await this.getCardTitleAsync(this.categoryId) : undefined;