From 5dfeeadbb87af9bdf0761c27fc2eba08c44cbfe6 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Fri, 14 Apr 2023 20:03:11 +0200
Subject: [PATCH] fix(popouts): fix touch on scroll areas being weird

---
 .../positions/FloatingCardMobilePosition.tsx    | 17 +++++++++++++++--
 src/setup/index.css                             | 13 ++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/popout/positions/FloatingCardMobilePosition.tsx b/src/components/popout/positions/FloatingCardMobilePosition.tsx
index 059f6667..7f890051 100644
--- a/src/components/popout/positions/FloatingCardMobilePosition.tsx
+++ b/src/components/popout/positions/FloatingCardMobilePosition.tsx
@@ -21,8 +21,21 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
   }));
 
   const bind = useDrag(
-    ({ last, velocity: [, vy], direction: [, dy], movement: [, my] }) => {
+    ({
+      last,
+      velocity: [, vy],
+      direction: [, dy],
+      movement: [, my],
+      ...event
+    }) => {
       if (closing.current) return;
+
+      const isInScrollable = (event.target as HTMLDivElement).closest(
+        ".overflow-y-auto"
+      );
+      // console.log(my);
+      if (isInScrollable) return; // Don't attempt to swipe the thing away if it's a scroll area unless the scroll area is at the top and the user is swiping down
+
       const height = cardRect?.height ?? 0;
       if (last) {
         // if past half height downwards
@@ -69,7 +82,7 @@ export function FloatingCardMobilePosition(props: MobilePositionProps) {
 
   return (
     <div
-      className="absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none"
+      className="is-mobile-view absolute inset-x-0 mx-auto max-w-[400px] origin-bottom-left touch-none"
       style={{
         transform: `translateY(${
           window.innerHeight - (cardRect?.height ?? 0) + 200
diff --git a/src/setup/index.css b/src/setup/index.css
index e699aa1b..29a04f0f 100644
--- a/src/setup/index.css
+++ b/src/setup/index.css
@@ -38,6 +38,7 @@ body[data-no-select] {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -55,6 +56,11 @@ body[data-no-select] {
   @apply brightness-[500];
 }
 
+/* Disable scrolling on mobile view */
+.is-mobile-view .overflow-y-auto {
+  height: 60vh;
+}
+
 /*generated with Input range slider CSS style generator (version 20211225)
 https://toughengineer.github.io/demo/slider-styler*/
 :root {
@@ -62,6 +68,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   --slider-border-radius: 1em;
   --slider-progress-background: #8652bb;
 }
+
 input[type=range].styled-slider {
   height: var(--slider-height);
   -webkit-appearance: none;
@@ -101,7 +108,7 @@ input[type=range].styled-slider::-webkit-slider-thumb:hover {
 }
 
 input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
-  background: linear-gradient(var(--slider-progress-background),var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
 }
 
 /*mozilla*/
@@ -127,7 +134,7 @@ input[type=range].styled-slider::-moz-range-thumb:hover {
 }
 
 input[type=range].styled-slider.slider-progress::-moz-range-track {
-  background: linear-gradient(var(--slider-progress-background),var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
+  background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
 }
 
 /*ms*/
@@ -172,4 +179,4 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
   background: var(--slider-progress-background);
   border: none;
   border-right-width: 0;
-}
+}
\ No newline at end of file