From 7f592f2b3516a8d5dd69d993d9c72f73804756cc Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 16 May 2025 01:56:53 +0530
Subject: [PATCH] (fix/layout) prevent overlap in tab screen

---
 frontend/src/App.tsx                               | 7 +++----
 frontend/src/Navigation.tsx                        | 6 +++---
 frontend/src/conversation/ConversationMessages.tsx | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 66ba6235..ec383ca7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -37,10 +37,10 @@ function MainLayout() {
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <ActionButtons showNewChat={true} showShare={true} />
       <div
-        className={`h-[calc(100dvh-64px)] md:h-screen ${
+        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
           !isMobile
-            ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
-            : 'ml-0 md:ml-16'
+            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
+            : 'ml-0 lg:ml-16'
         }`}
       >
         <Outlet />
@@ -48,7 +48,6 @@ function MainLayout() {
     </div>
   );
 }
-
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
   if (!componentMounted) {
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 53487dd6..02e9f19c 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -219,7 +219,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   return (
     <>
       {!navOpen && (
-        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all md:block">
+        <div className="duration-25 absolute left-3 top-3 z-20 hidden transition-all lg:block">
           <div className="flex items-center gap-3">
             <button
               onClick={() => {
@@ -496,10 +496,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
+      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black lg:hidden">
         <div className="ml-6 flex h-full items-center gap-6">
           <button
-            className="h-6 w-6 md:hidden"
+            className="h-6 w-6 lg:hidden"
             onClick={() => setNavOpen(true)}
           >
             <img
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index da36516a..4a345e27 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -151,7 +151,7 @@ export default function ConversationMessages({
       ref={conversationRef}
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-12"
+      className="flex h-full w-full justify-center overflow-y-auto will-change-scroll sm:pt-6 lg:pt-12"
     >
       {queries.length > 0 && !atLast && (
         <button