From feaf9d591779b8919418bd828c08f153a31f61d1 Mon Sep 17 00:00:00 2001
From: Abigaila Ekiert <arekiert@gmail.com>
Date: Fri, 18 Oct 2024 13:26:35 +0200
Subject: [PATCH] make sure watermark is visible on transitional forms

---
 package.json                                        | 2 +-
 src/globalStyles/_variables.scss                    | 2 ++
 src/hostedPages/activities/form/TraditionalForm.tsx | 4 ++--
 src/hostedPages/activities/form/form.module.scss    | 6 +++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 4554dfc..06a874c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.73",
+  "version": "0.1.74",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",
diff --git a/src/globalStyles/_variables.scss b/src/globalStyles/_variables.scss
index 818e119..d4a132d 100644
--- a/src/globalStyles/_variables.scss
+++ b/src/globalStyles/_variables.scss
@@ -94,6 +94,8 @@ html {
   /* 56px */
   --spacing-16: 4rem;
   /* 64px */
+  --spacing-18: 4.5rem;
+  /* 72px */
   --spacing-20: 5rem;
   /* 80px */
   --spacing-24: 6rem;
diff --git a/src/hostedPages/activities/form/TraditionalForm.tsx b/src/hostedPages/activities/form/TraditionalForm.tsx
index a89d04c..d5e3cd8 100644
--- a/src/hostedPages/activities/form/TraditionalForm.tsx
+++ b/src/hostedPages/activities/form/TraditionalForm.tsx
@@ -29,7 +29,7 @@ export const TraditionalForm = ({
       if (scrollHintOverlayRef.current) {
         const { scrollTop, scrollHeight, clientHeight } =
           document.documentElement
-        const isAtBottom = scrollTop + clientHeight >= scrollHeight
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
         scrollHintOverlayRef.current.style.top = isAtBottom ? '100%' : 'auto'
       }
     }
@@ -104,7 +104,7 @@ export const TraditionalForm = ({
             </div>
           )}
           {form?.trademark && (
-            <div className={`${classes.trademark} ${classes.conversational}`}>
+            <div className={`${classes.trademark} ${classes.traditional}`}>
               {form.trademark}
             </div>
           )}
diff --git a/src/hostedPages/activities/form/form.module.scss b/src/hostedPages/activities/form/form.module.scss
index 2a07a8a..bd1f88c 100644
--- a/src/hostedPages/activities/form/form.module.scss
+++ b/src/hostedPages/activities/form/form.module.scss
@@ -91,7 +91,7 @@
   }
 
   &.traditional {
-    padding-bottom: var(--awell-spacing-6);
+    padding-bottom: var(--spacing-18)
   }
   &.conversational {
     padding-top: var(--awell-spacing-4);
@@ -104,8 +104,8 @@
   bottom: 50px;
   left: 0;
   width: 100%;
-  height: 70px;
-  background: linear-gradient(to bottom, transparent, var(--awell-neutralLight10) 100%);
+  height: 50px;
+  background: linear-gradient(to bottom, transparent, var(--awell-neutralLight10) 50%);
   pointer-events: none; /* Prevent interaction */
   transition: top 0.5s ease-in-out;
 }