Add mobile stylings to UI (#75)

* initial chat pages mobile stylings

* fix sidebar

* manage workspace modal styles

* mobile styles v1
This commit is contained in:
Timothy Carambat
2023-06-16 23:50:56 -07:00
committed by GitHub
parent e7ba028497
commit 3945a77290
20 changed files with 259 additions and 88 deletions

View File

@@ -3,6 +3,8 @@ import ChatHistory from "./ChatHistory";
import PromptInput from "./PromptInput";
import Workspace from "../../../models/workspace";
import handleChat from "../../../utils/chat";
import { isMobile } from "react-device-detect";
import { SidebarMobileHeader } from "../../Sidebar";
export default function ChatContainer({ workspace, knownHistory = [] }) {
const [message, setMessage] = useState("");
@@ -68,9 +70,10 @@ export default function ChatContainer({ workspace, knownHistory = [] }) {
return (
<div
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative ml-[2px] mr-[8px] my-[16px] rounded-[26px] bg-white dark:bg-black-900 min-w-[82%] p-[18px] h-full overflow-y-scroll"
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[8px] md:my-[16px] md:rounded-[26px] bg-white dark:bg-black-900 w-full md:min-w-[82%] p-[18px] h-full overflow-y-scroll"
>
{isMobile && <SidebarMobileHeader />}
<div className="flex flex-col h-full w-full flex">
<ChatHistory history={chatHistory} workspace={workspace} />
<PromptInput