adapt layout on mobile view

This commit is contained in:
Xuan Son Nguyen 2025-02-08 14:58:30 +01:00
parent 6f1fcbcc0f
commit 19a95daf78
2 changed files with 11 additions and 3 deletions

Binary file not shown.

View file

@ -60,15 +60,23 @@ export default function ChatScreen() {
} }
}; };
const hasCanvas = !!canvasData;
return ( return (
<div <div
className={classNames({ className={classNames({
'grid gap-8 grow': true, 'grid gap-8 grow': true,
'grid-cols-2': !!canvasData, 'grid-cols-1 lg:grid-cols-2': hasCanvas, // adapted for mobile
'grid-cols-1': !canvasData, 'grid-cols-1': !hasCanvas,
})} })}
> >
<div className="flex flex-col w-full max-w-[900px] mx-auto"> <div
className={classNames({
'flex flex-col w-full max-w-[900px] mx-auto': true,
'hidden lg:flex': hasCanvas, // adapted for mobile
flex: !hasCanvas,
})}
>
{/* chat messages */} {/* chat messages */}
<div id="messages-list" className="grow"> <div id="messages-list" className="grow">
<div className="mt-auto flex justify-center"> <div className="mt-auto flex justify-center">