From e114f2c60e37628bba5b1302bffa0182c232dba8 Mon Sep 17 00:00:00 2001
From: Gion-Andri Cantieni <gion-andri@gmx.ch>
Date: Fri, 8 Dec 2023 16:56:37 +0100
Subject: [PATCH] fix: sticky header on mobile

---
 .../events-list-cards/events-list-cards.component.scss | 10 ++++++----
 .../shared/directives/scrollable-title.directive.ts    |  8 +++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss
index 7551d00..39bf890 100644
--- a/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss
+++ b/src/app/components/events/events-list/events-list-cards/events-list-cards.component.scss
@@ -87,15 +87,16 @@
         }
     }
 
+    &.touchesTop:not(.first) {
+        border-top: none;
+    }
+
     @include media-breakpoint-up(md) {
         h2 {
             font-size: 1.5rem;
             margin: 1rem 2rem;
         }
 
-        &.touchesTop:not(.first) {
-            border-top: none;
-        }
         &.isOnTop {
             border-top: none;
         }
@@ -114,8 +115,9 @@
 }
 
 ul {
-    padding: 0 1rem;
     list-style: none;
+    margin-bottom: 0;
+    padding: 0 1rem 1rem;;
 
     @include media-breakpoint-up(md) {
         padding: 2rem;
diff --git a/src/app/shared/directives/scrollable-title.directive.ts b/src/app/shared/directives/scrollable-title.directive.ts
index 1caf126..482141c 100644
--- a/src/app/shared/directives/scrollable-title.directive.ts
+++ b/src/app/shared/directives/scrollable-title.directive.ts
@@ -30,6 +30,7 @@ export class ScrollableTitleDirective implements OnInit, OnDestroy {
 
     private _checkScroll() {
         if (isPlatformBrowser(this.platformId)) {
+            const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
             const {
                 top: t,
             } = this.el.nativeElement.getBoundingClientRect();
@@ -37,7 +38,12 @@ export class ScrollableTitleDirective implements OnInit, OnDestroy {
                 scrollX,
             } = window
             const topPos = t + scrollX
-            this.touchesTop = topPos <= 75;
+
+            if (width < 768) {
+                this.touchesTop = topPos <= 54;
+            } else {
+                this.touchesTop = topPos <= 75;
+            }
             this.isOnTop = topPos < 1;
             this.startsHiding = topPos < 0;
         }