fix: profile module items show click effect on scroll

src/app/modules/profile/page/profile-page-section.html

@@ -56,9 +56,10 @@
 <swiper
   #swiper
   (elementSizeChange)="resizeSwiper($event, swiper.swiperRef)"
-  (activeIndexChange)="activeIndexChange($event[0])"
-  [simulateTouch]="false"
-  [touchMoveStopPropagation]="false"
+  [elementSizeChangeDebounce]="100"
+  (toEdge)="activeIndexChange($event[0])"
+  (fromEdge)="activeIndexChange($event[0])"
+  [cssMode]="true"
   [spaceBetween]="0"
   [slidesPerView]="slidesPerView"
   class="card-swiper"

src/app/modules/profile/page/profile-page-section.scss

@@ -28,6 +28,16 @@
   padding-inline: 0;
 }
 
+swiper {
+  //noinspection CssInvalidFunction
+  transform: translateY(calc(-1 * var(--spacing-sm)))
+}
+
+stapps-section-link-card {
+  // required spacing for box shadow
+  margin-block: var(--spacing-sm);
+}
+
 :host {
   display: grid;
   grid-template-columns: 1fr auto auto auto;
@@ -46,7 +56,6 @@
     width: 100%;
     padding-right: 0;
   }
-  margin-bottom: var(--spacing-md);
 }
 
 ion-button.hidden {

src/app/util/element-size-change.directive.ts

@@ -17,6 +17,7 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
+  Input,
   OnDestroy,
   OnInit,
   Output,
@@ -29,13 +30,24 @@ export class ElementSizeChangeDirective implements OnInit, OnDestroy {
   @Output()
   elementSizeChange = new EventEmitter<ResizeObserverEntry>();
 
+  @Input() elementSizeChangeDebounce?: number;
+
+  debounceStamp = 0;
+
   private resizeObserver: ResizeObserver;
 
   constructor(private elementRef: ElementRef) {}
 
   ngOnInit() {
     this.resizeObserver = new ResizeObserver(elements => {
-      if (!elements[0]) return;
+      const stamp = Date.now();
+      if (
+        !elements[0] ||
+        (this.elementSizeChangeDebounce &&
+          stamp - this.debounceStamp < this.elementSizeChangeDebounce)
+      )
+        return;
+      this.debounceStamp = stamp;
       this.elementSizeChange.emit(elements[0]);
     });
     this.resizeObserver.observe(this.elementRef.nativeElement);