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

Make layout responsive for mobile devices (#5475)

Browse Source 
Co-authored-by: openhands <openhands@all-hands.dev>
This commit is contained in:
tofarr 2024-12-10 12:31:20 -07:00 committed by GitHub
parent e9637d40b9
commit 5fe116cfb1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/features/sidebar/sidebar.tsx
View File

@ -54,13 +54,13 @@ export function Sidebar() {
return (
<>
<aside className="px-1 flex flex-col gap-1">
<aside className="h-[40px] md:h-auto px-1 flex flex-row md:flex-col gap-1">
<div className="w-[34px] h-[34px] flex items-center justify-center">
{user.isLoading && <LoadingSpinner size="small" />}
{!user.isLoading && <AllHandsLogoButton onClick={handleClickLogo} />}
</div>
<nav className="py-[18px] flex flex-col items-center gap-[18px]">
<nav className="md:py-[18px] flex flex-row md:flex-col items-center gap-[18px]">
<UserActions
user={user.data ? { avatar_url: user.data.avatar_url } : undefined}
onLogout={logout}

4
frontend/src/routes/_oh.app/route.tsx
View File

@ -70,11 +70,11 @@ function App() {
<EventHandler>
<div className="flex flex-col h-full gap-3">
<div className="flex h-full overflow-auto gap-3">
<Container className="w-[390px] max-h-full relative">
<Container className="w-full md:w-[390px] max-h-full relative">
<ChatInterface />
</Container>
<div className="flex flex-col grow gap-3">
<div className="hidden md:flex flex-col grow gap-3">
<Container
className="h-2/3"
labels={[

4
frontend/src/routes/_oh/route.tsx
View File

@ -79,11 +79,11 @@ export default function MainApp() {
return (
<div
data-testid="root-layout"
className="bg-root-primary p-3 h-screen min-w-[1024px] overflow-x-hidden flex gap-3"
className="bg-root-primary p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
>
<Sidebar />
<div className="h-full w-full relative">
<div className="h-[calc(100%-50px)] md:h-full w-full relative">
<Outlet />
</div>