diff options
| author | Yash <[email protected]> | 2024-04-02 17:56:39 +0000 |
|---|---|---|
| committer | Yash <[email protected]> | 2024-04-02 17:56:39 +0000 |
| commit | 3b07a9ecc9d8dee2f99fb3cdbadf4fa5fd091a8f (patch) | |
| tree | 46104715be5c0de9b46b103a3b3f0784b87ee342 /apps | |
| parent | responsiveness and phone memory drawer (diff) | |
| download | supermemory-3b07a9ecc9d8dee2f99fb3cdbadf4fa5fd091a8f.tar.xz supermemory-3b07a9ecc9d8dee2f99fb3cdbadf4fa5fd091a8f.zip | |
responsiveness
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/app/layout.tsx | 4 | ||||
| -rw-r--r-- | apps/web/src/components/Main.tsx | 18 |
2 files changed, 20 insertions, 2 deletions
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 5b2ced94..33f38293 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -17,6 +17,10 @@ export default function RootLayout({ return ( <html lang="en"> <body className={roboto.className}> + <div + id="d" + className="fixed left-0 top-0 h-[5px] w-screen bg-red-500" + ></div> <div vaul-drawer-wrapper="" className="min-w-screen overflow-x-hidden"> {children} </div> diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx index 9674ca03..b6ad3787 100644 --- a/apps/web/src/components/Main.tsx +++ b/apps/web/src/components/Main.tsx @@ -1,5 +1,5 @@ "use client"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { FilterCombobox } from "./Sidebar/FilterCombobox"; import { Textarea2 } from "./ui/textarea"; import { ArrowRight } from "lucide-react"; @@ -10,12 +10,26 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) { const [value, setValue] = useState(""); const { width } = useViewport(); + const textArea = useRef<HTMLTextAreaElement>(null); + + useEffect(() => { + function onResize() { + if (!textArea.current || !window.visualViewport) return; + + const visualViewportHeight = window.visualViewport.height; + } + + window.visualViewport?.addEventListener("resize", onResize); + return () => window.visualViewport?.removeEventListener("resize", onResize); + }, []); + return ( <main data-sidebar-open={sidebarOpen} - className="flex h-screen max-h-screen w-full items-end justify-center px-5 py-40 md:items-center md:px-60 md:[&[data-sidebar-open='true']]:px-20" + className="flex h-screen max-h-screen w-full items-end justify-center px-5 pb-[20vh] pt-5 md:items-center md:px-60 md:[&[data-sidebar-open='true']]:px-20" > <Textarea2 + ref={textArea} className="h-max max-h-[30em] min-h-[3em] resize-y flex-row items-start justify-center overflow-auto py-5 md:h-[20vh] md:resize-none md:flex-col md:items-center md:justify-center md:p-2 md:pb-2 md:pt-2" textAreaProps={{ placeholder: "Ask your SuperMemory...", |