github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): resolve layout and interaction issues with the conversation UI on touch devices (#11299)

Browse Source
This commit is contained in:
Hiep Le 2025-10-09 23:47:35 +07:00 committed by GitHub
parent 9db558fd87
commit 7f0b9e6ac2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/features/conversation/conversation-main/mobile-layout.tsx
View File

@ -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>

5
frontend/src/routes/root-layout.tsx
View File

@ -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>