fix issue with displaying message menu in mobile chat

daostack · Nov 6, 2023 · 429f840 · 429f840
1 parent 3c8bd77
commit 429f840
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss
@@ -18,7 +18,12 @@
   overscroll-behavior: contain;
   display: flex;
   flex-direction: column-reverse;
-  padding: 0.5rem 2rem var(--chat-input-wrapper-height) 2rem;
+  padding: 0.5rem 2rem 0 2rem;
+  margin-bottom: var(--chat-input-wrapper-height);
+
+  @include big-phone {
+    margin-bottom: 0;
+  }
 }
 
 .emptyChat {

diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -183,7 +183,7 @@ export default function ChatComponent({
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const [isScrolling, setScrolling] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
   const chatContentContextValue: ChatContentData = useMemo(
     () => ({
       isScrolling,
@@ -603,11 +603,11 @@ export default function ChatComponent({
 
   useEffect(() => {
     const deactivateScrollingFlag = debounce(() => {
-      setScrolling(false);
+      setIsScrolling(false);
     }, 300);
 
     function handleScroll() {
-      setScrolling(true);
+      setIsScrolling(true);
       deactivateScrollingFlag();
     }
 

diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss
@@ -1,6 +1,8 @@
 @import "../../../../../../constants";
 
 .modal {
+  height: 90vh;
+
   .modalHeaderWrapper {
     padding: 0;