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 (
|
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">
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue