From dd9b28f8fec18dfff0872e7c26a9018b45eb0c26 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 11 Dec 2024 20:53:29 -0800
Subject: [PATCH] adjusting scroll action for thread

---
 .../web/src/conversation/Conversation.module.css |  2 +-
 app/client/web/src/conversation/Conversation.tsx | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/client/web/src/conversation/Conversation.module.css b/app/client/web/src/conversation/Conversation.module.css
index 5b1d7c9c..5a004f88 100644
--- a/app/client/web/src/conversation/Conversation.module.css
+++ b/app/client/web/src/conversation/Conversation.module.css
@@ -23,11 +23,11 @@
     flex-direction: column-reverse;
     flex-grow: 1;
     flex-shrink: 1;
-    overflow: auto;
     width: 100%;
   }
 
   .thread {
+    padding-top: 1024px;
     display: flex;
     flex-direction: column;
     height: fit-content;
diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx
index 30e0c1e0..56517fb5 100644
--- a/app/client/web/src/conversation/Conversation.tsx
+++ b/app/client/web/src/conversation/Conversation.tsx
@@ -6,7 +6,7 @@ import { IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconEx
 import { Divider, Text, ActionIcon, Loader } from '@mantine/core'
 import { Message } from '../message/Message';
 
-const LOAD_MORE_POS = 12;
+const PAD_HEIGHT = (1024 - 64);
 const LOAD_DEBOUNCE = 1000;
 
 export type MediaAsset = {
@@ -33,12 +33,19 @@ export function Conversation() {
     if (thread.current && state.loadingMore) {
       thread.current.scrollTop = scrollPos.current;
     } else {
-      if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < LOAD_MORE_POS) {
+      if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < PAD_HEIGHT) {
         if (scrollTop < scrollPos.current) {
           actions.more();
         }
+        scrollPos.current = (clientHeight - scrollHeight) + PAD_HEIGHT;
+        thread.current.scrollTop = scrollPos.current;
+      } else {
+        if (scrollTop < (clientHeight - scrollHeight) + PAD_HEIGHT) {
+          scrollPos.current = (clientHeight - scrollHeight) + PAD_HEIGHT; 
+        } else {
+          scrollPos.current = scrollTop;
+        }
       }
-      scrollPos.current = scrollTop;
     }
   };
 
@@ -96,9 +103,10 @@ export function Conversation() {
           <IconX size={24} className={classes.close} onClick={actions.close} />
         </div>
       </div>
-      <div ref={thread} className={classes.frame} onScroll={onScroll}>
+      <div ref={thread} className={classes.frame} style={state.loadingMore ? { overflow: 'hidden' } : { overflow: 'auto' }} onScroll={onScroll}>
         { state.loaded && (
           <div className={classes.thread}>
+            <div className="topicPad" />
             {topics}
           </div>
         )}