(fix): weird keyboard behaviour in android app

(qol): update todos

apps/web/src/components/navbar.tsx

@@ -30,7 +30,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
   return (
     <div
       data-tauri-drag-region
-      className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
+      className={`${forMobile && "border-b"} w-full shrink-0 gap-2 h-13.5 flex items-center justify-between`}
     >
       <div className="flex items-center justify-center gap-2">
         {forMobile ? (
@@ -137,7 +137,7 @@ export function MobileNavbar() {
   const { setOpenMobile } = useSidebar();
 
   return (
-    <div className="z-51 w-full pb-[env(safe-area-inset-bottom)] bg-card border-t">
+    <div className="z-51 w-full shrink-0 pb-[env(safe-area-inset-bottom)] bg-card border-t">
       <div className="z-51 w-full h-15 grid grid-cols-3 items-center place-items-center px-5">
         <SidebarTrigger
           className="text-foreground w-12! h-12! aspect-square rounded-xl flex flex-col gap-1"

apps/web/src/index.css

@@ -5,3 +5,15 @@
 
 @source "./**/*.{ts,tsx}";
 @source "../../../packages/**/src/**/*.{ts,tsx}";
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#root {
+  min-height: 0;
+}

apps/web/src/index.tsx

@@ -110,7 +110,7 @@ function RootShell() {
   return (
     <DeeplinkContext>
       <ThemeProvider>
-        <div className="w-screen h-screen overflow-hidden">
+        <div className="w-screen h-dvh overflow-hidden">
           <Toaster
             position={isMobile ? "top-center" : "bottom-right"}
             {...(isTauri() && isMobile

apps/web/src/routes/app/layout.tsx

@@ -18,13 +18,13 @@ export default function Layout({ children }: { children: ReactNode }) {
   const showMobileNavbar = useShowMobileNavbar();
 
   return (
-    <div className="w-full h-full flex bg-sidebar">
-      <SidebarProvider>
+    <div className="w-full h-full min-h-0 flex overflow-hidden bg-sidebar">
+      <SidebarProvider className="h-full min-h-0 overflow-hidden">
         <Sidebar />
         <div
           // Background of ui that is overlapping with the system ui
           className={cn(
-            "w-full h-full flex flex-col",
+            "w-full h-full min-h-0 flex flex-col overflow-hidden",
             isTauri() && isMobile && "pt-[env(safe-area-inset-top)]",
             isMobile && showMobileNavbar && "bg-background",
           )}
@@ -34,7 +34,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
           <div
             className={cn(
-              "bg-background h-full w-full",
+              "bg-background min-h-0 flex-1 w-full overflow-hidden",
               !isMobile && "rounded-tl-3xl border-t border-l",
             )}
           >

apps/web/todo.md

@@ -0,0 +1 @@
+- Make the sidebar use <Activity /> to make it feel less slow on mobile