Merge pull request #307 from NucleoidAI/hide-convert-button-in-mobile

Change suggestions position
NucleoidAI · Jul 24, 2024 · 9aeae1c · 9aeae1c
2 parents 02e8f23 + 887fcf6
commit 9aeae1c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/src/widgets/Chat/ChatDisplay.jsx b/src/widgets/Chat/ChatDisplay.jsx
@@ -96,7 +96,7 @@ const ChatDisplay = ({
         paddingX: { xs: "8px", sm: "16px", md: "20px" },
         paddingTop: "20px",
         paddingBottom: {
-          xs: suggestionsOverlay.active ? 19 : 1,
+          xs: suggestionsOverlay.active ? 8 : 1,
           sm: suggestionsOverlay.active ? 12.5 : 2.5,
         },
       }}

diff --git a/src/widgets/Chat/ChatWidget.jsx b/src/widgets/Chat/ChatWidget.jsx
@@ -11,15 +11,13 @@ import useChat from "./useChat";
 import { useEvent } from "@nucleoidai/react-event";
 import { useParams } from "react-router-dom";
 
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 
 const ChatWidget = () => {
   const theme = useTheme();
   const { chatId } = useParams("chatId");
 
-  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
-
   const [codeResponse, setCodeResponse] = useState(false);
   const [isItFirstVisit, setIsItFirstVisit] = useState();
   const [loading, setLoading] = useState(false);
@@ -122,7 +120,7 @@ const ChatWidget = () => {
         height: "100%",
         width: "100%",
         backgroundColor: theme.palette.background.paper,
-        paddingBottom: isMobile ? "25px" : "10px",
+        paddingBottom: "10px",
       }}
     >
       <ChatDisplay

diff --git a/src/widgets/Chat/SuggestionsOverlay.jsx b/src/widgets/Chat/SuggestionsOverlay.jsx
@@ -201,8 +201,7 @@ const SuggestionsOverlay = ({ onSuggestionClick, loading, chat, error }) => {
         display: "flex",
         flexWrap: "wrap",
         justifyContent: "center",
-        position: "absolute",
-        bottom: { xs: "15%", sm: "15%" },
+        position: "relative",
         width: "100%",
         padding: "10px",
       }}