From 7f0b9e6ac2ae46a152b2e364d4c1314bd02a3d21 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Thu, 9 Oct 2025 23:47:35 +0700
Subject: [PATCH] fix(frontend): resolve layout and interaction issues with the
 conversation UI on touch devices (#11299)

---
 .../conversation/conversation-main/mobile-layout.tsx | 12 ++++++------
 frontend/src/routes/root-layout.tsx                  |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx b/frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx
index 809d3bc280..c71bac88e7 100644
--- a/frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx
+++ b/frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx
@@ -8,12 +8,12 @@ interface MobileLayoutProps {
 
 export function MobileLayout({ isRightPanelShown }: MobileLayoutProps) {
   return (
-    <div className="relative h-full flex flex-col overflow-hidden">
+    <div className="relative flex-1 flex flex-col">
       {/* Chat area - shrinks when panel slides up */}
       <div
         className={cn(
-          "flex-1 bg-base overflow-hidden transition-all duration-300 ease-in-out",
-          isRightPanelShown ? "flex-[0.6]" : "flex-1",
+          "bg-base overflow-hidden",
+          isRightPanelShown ? "h-160" : "flex-1",
         )}
       >
         <ChatInterface />
@@ -22,13 +22,13 @@ export function MobileLayout({ isRightPanelShown }: MobileLayoutProps) {
       {/* Bottom panel - slides up from bottom */}
       <div
         className={cn(
-          "absolute bottom-0 left-0 right-0 transition-all duration-300 ease-in-out overflow-hidden",
+          "absolute bottom-4 left-0 right-0 top-160 transition-all duration-300 ease-in-out overflow-hidden",
           isRightPanelShown
-            ? "h-[40%] translate-y-0 opacity-100"
+            ? "h-160 translate-y-0 opacity-100"
             : "h-0 translate-y-full opacity-0",
         )}
       >
-        <div className="h-full flex flex-col gap-3 pt-2">
+        <div className="h-full flex flex-col gap-3 pb-2 md:pb-0 pt-2">
           <ConversationTabContent />
         </div>
       </div>
diff --git a/frontend/src/routes/root-layout.tsx b/frontend/src/routes/root-layout.tsx
index 05ad5ae142..930451dae9 100644
--- a/frontend/src/routes/root-layout.tsx
+++ b/frontend/src/routes/root-layout.tsx
@@ -216,7 +216,10 @@ export default function MainApp() {
         {config.data?.MAINTENANCE && (
           <MaintenanceBanner startTime={config.data.MAINTENANCE.startTime} />
         )}
-        <div id="root-outlet" className="flex-1 relative overflow-auto">
+        <div
+          id="root-outlet"
+          className="flex-1 relative overflow-auto custom-scrollbar"
+        >
           <EmailVerificationGuard>
             <Outlet />
           </EmailVerificationGuard>