mobile UI fixes

apps/web/app/(dash)/(memories)/content.tsx

@@ -359,7 +359,7 @@ function Filters({
   filter: string;
 }) {
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-4 flex-wrap">
       {FilterMethods.map((i) => {
         return (
           <button

apps/web/app/(dash)/(memories)/space/[spaceid]/page.tsx

@@ -9,18 +9,13 @@ import { auth } from "@/server/auth";
 async function Page({ params: { spaceid } }: { params: { spaceid: number } }) {
   const user = await auth();
 
-  const hasAccess = await db.query.spacesAccess.findMany({
-    where: and(
-      eq(spacesAccess.spaceId, spaceid),
-      eq(spacesAccess.userEmail, user?.user!.email!),
-    ),
-  });
-
-  if (!hasAccess) return redirect("/home");
-
   const { success, data } = await getMemoriesInsideSpace(spaceid);
   if (!success ?? !data) return redirect("/home");
 
+  const hasAccess = await db.query.spacesAccess.findMany({
+    where: and(eq(spacesAccess.spaceId, spaceid)),
+  });
+
   return (
     <MemoriesPage
       memoriesAndSpaces={{ memories: data.memories, spaces: [] }}

apps/web/app/(dash)/chat/chatWindow.tsx

@@ -210,7 +210,7 @@ function ChatWindow({
             className="max-w-3xl z-10 mx-auto relative h-full overflow-y-auto no-scrollbar"
             key="chat"
           >
-            <div className="w-full pt-24 mb-40">
+            <div className="w-full pt-24 mb-40 px-4 md:px-0">
               {chatHistory.map((chat, idx) => (
                 <div key={idx} className="space-y-16">
                   <div
@@ -407,7 +407,7 @@ function ChatWindow({
               ))}
             </div>
 
-            <div className="fixed bottom-4 w-full max-w-3xl">
+            <div className="fixed bottom-24 md:bottom-4 w-full max-w-3xl">
               <QueryInput
                 mini
                 className="w-full shadow-md"

apps/web/app/(dash)/home/page.tsx

@@ -75,7 +75,7 @@ function Page({
   }, []);
 
   return (
-    <div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col">
+    <div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
       {/* all content goes here */}
       {/* <div className="">hi {firstTime ? 'first time' : ''}</div> */}
 

apps/web/app/(dash)/layout.tsx

@@ -14,7 +14,7 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <main className="h-screen flex flex-col">
-      <div className="fixed top-0 left-0 w-full">
+      <div className="fixed top-0 left-0 w-full z-40">
         <Header />
       </div>
 
@@ -28,7 +28,7 @@ async function Layout({ children }: { children: React.ReactNode }) {
 
       <Menu />
 
-      <div className="w-full h-full px-2 md:px-0">{children}</div>
+      <div className="w-full h-full">{children}</div>
 
       <Toaster />
     </main>

apps/web/app/(dash)/menu.tsx

@@ -34,6 +34,7 @@ import {
   TooltipTrigger,
 } from "@repo/ui/shadcn/tooltip";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { HomeIcon } from "@heroicons/react/24/solid";
 import { createMemory, createSpace } from "../actions/doers";
 import { Input } from "@repo/ui/shadcn/input";
 import ComboboxWithCreate from "@repo/ui/shadcn/combobox";
@@ -332,8 +333,16 @@ function Menu() {
         </DialogContent>
 
         {/* Mobile Menu */}
-        <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary">
+        <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
           <div className="flex justify-around items-center">
+            <Link
+              href={"/"}
+              className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
+            >
+              <HomeIcon width={24} height={24} />
+              <p className="text-xs text-foreground-menu mt-2">Home</p>
+            </Link>
+
             <DialogTrigger
               className={`flex flex-col items-center cursor-pointer text-white`}
             >