fix: AIChat responsive fix - cherry pick of pr 844 (#855)

* AIChat responsive fix * AIChat responsive fix - requested changes (#861) --------- Co-authored-by: SinanovicAhmed <ahmedsinanovic20@gmail.com> Co-authored-by: Ahmed Sinanović <93159428+SinanovicAhmed@users.noreply.github.com>
th3cyb3rhub · Jun 23, 2024 · 2cda8db · 2cda8db
1 parent 983f809
commit 2cda8db
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 13 deletions.
diff --git a/src/components/AIChat/AIChat.jsx b/src/components/AIChat/AIChat.jsx
@@ -267,7 +267,7 @@ const AiChat = () => {
                                     />
 
                                     {!isTrailEnded ? (
-                                        <div>
+                                        <>
                                             {chat.title !== "New Chat" ? null : (
                                                 <Prompts handleSendDummyMessage={handleSendDummyMessage} />
                                             )}
@@ -288,7 +288,7 @@ const AiChat = () => {
                                                     </button>
                                                 )}
                                             </ChatInput>
-                                        </div>
+                                        </>
                                     ) : null}
                                 </ChatBox>
                             ),

diff --git a/src/components/AIChat/AIChatElements.jsx b/src/components/AIChat/AIChatElements.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const AIChatContainer = styled.div`
+    position: relative;
     display: flex;
     justify-content: space-between;
     gap: 10px;
@@ -66,6 +67,7 @@ export const ChatBox = styled.div`
 export const ChatHeader = styled.div`
     display: flex;
     flex-direction: row;
+    gap: 5px;
     justify-content: space-between;
     align-items: center;
 `;
@@ -92,6 +94,7 @@ export const ChatInput = styled.form`
     p {
         padding: 10px 15px;
         flex: 1;
+        width: 100%;
         background: #1a1c1d;
         color: #fff;
         border: 1px solid #464646;

diff --git a/src/components/AIChat/Prompts/Prompts.jsx b/src/components/AIChat/Prompts/Prompts.jsx
@@ -12,17 +12,10 @@ const Prompts = ({ handleSendDummyMessage }) => {
     }, []); // Empty dependency array ensures the effect runs only once
 
     return (
-        <div>
-            <div className="grid grid-cols-1 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 w-full h-full mb-4 lg:flex-row md:flex-row sm:flex-col gap-2">
-                {prompts.map((prompt, index) => (
-                    <PromptCard
-                        key={index}
-                        prompt={prompt}
-                        index={index}
-                        handleSendDummyMessage={handleSendDummyMessage}
-                    />
-                ))}
-            </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 mb-4 gap-2 overflow-auto">
+            {prompts.map((prompt, index) => (
+                <PromptCard key={index} prompt={prompt} index={index} handleSendDummyMessage={handleSendDummyMessage} />
+            ))}
         </div>
     );
 };

diff --git a/src/components/AIChat/RecentChatsElements.jsx b/src/components/AIChat/RecentChatsElements.jsx
@@ -11,6 +11,7 @@ export const RecentChatsContainer = styled.div`
     padding: 10px 25px;
     background: #111; /* Adjusted background color */
     color: #fff;
+    z-index: 5;
     border: 1px solid rgb(70 70 70 / 55%);
 
     /* border: 1px solid #464646; */
@@ -35,6 +36,14 @@ export const RecentChatsContainer = styled.div`
     p {
         text-align: center;
     }
+
+    @media (width <= 900px) {
+        position: absolute;
+        max-width: 1000px;
+        min-width: 0;
+        top: 100px;
+        height: calc(100% - 100px);
+    }
 `;
 
 export const RecentChatsHeader = styled.div`