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 (
<div
className={classNames({
'grid gap-8 grow': true,
'grid-cols-2': !!canvasData,
'grid-cols-1': !canvasData,
'grid-cols-1 lg:grid-cols-2': hasCanvas, // adapted for mobile
'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 */}
<div id="messages-list" className="grow">
<div className="mt-auto flex justify-center">