adapt layout on mobile view
This commit is contained in:
parent
6f1fcbcc0f
commit
19a95daf78
2 changed files with 11 additions and 3 deletions
Binary file not shown.
|
@ -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">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue