more scroll fixes

src/components/layout/presets/contained-parent-view.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, Suspense } from "react";
 import { Outlet, useMatch } from "react-router";
-import { Box, Flex, FlexProps, Spinner } from "@chakra-ui/react";
+import { Flex, Spinner } from "@chakra-ui/react";
 
 import { useBreakpointValue } from "../../../providers/global/breakpoint-provider";
 import SimpleHeader from "./simple-header";
@@ -11,35 +11,26 @@ export default function ContainedParentView({
   path,
   title,
   width = "xs",
-}: PropsWithChildren<{ path: string; title?: string; width?: FlexProps["w"]; contain?: boolean }>) {
+}: PropsWithChildren<{ path: string; title?: string; width?: "xs" | "sm" | "md" }>) {
   const match = useMatch(path);
   const isMobile = useBreakpointValue({ base: true, lg: false });
   const showMenu = !isMobile || !!match;
 
-  if (showMenu)
-    return (
-      <Flex flex={1} overflow="hidden" h="full" maxH="100vh">
-        <Flex width={width} direction="column">
-          {title && <SimpleHeader title={title} position="initial" />}
-          <Flex direction="column" p="2" gap="2" overflowY="auto" overflowX="hidden">
+  return (
+    <Flex data-type="contained-view" h="100vh" overflow="hidden" direction={{ base: "column", lg: "row" }}>
+      {showMenu && (
+        <Flex w={{ base: "full", lg: width }} direction="column" overflowY="auto" overflowX="hidden" h="full">
+          {title && <SimpleHeader title={title} />}
+          <Flex direction="column" p="2" gap="2">
             {children}
           </Flex>
         </Flex>
-        {!isMobile && (
-          <Suspense fallback={<Spinner />}>
-            <ErrorBoundary>
-              <Outlet />
-            </ErrorBoundary>
-          </Suspense>
-        )}
-      </Flex>
-    );
-  else
-    return (
+      )}
       <Suspense fallback={<Spinner />}>
         <ErrorBoundary>
           <Outlet />
         </ErrorBoundary>
       </Suspense>
-    );
+    </Flex>
+  );
 }

src/components/layout/presets/simple-parent-view.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, Suspense } from "react";
 import { Outlet, useMatch } from "react-router";
-import { Box, Flex, FlexProps, Spinner } from "@chakra-ui/react";
+import { Box, Flex, Spinner } from "@chakra-ui/react";
 
 import { useBreakpointValue } from "../../../providers/global/breakpoint-provider";
 import SimpleHeader from "./simple-header";
@@ -11,8 +11,7 @@ export default function SimpleParentView({
   path,
   title,
   width = "xs",
-  contain,
-}: PropsWithChildren<{ path: string; title?: string; width?: FlexProps["w"]; contain?: boolean }>) {
+}: PropsWithChildren<{ path: string; title?: string; width?: "xs" | "sm" | "md" }>) {
   const match = useMatch(path);
   const isMobile = useBreakpointValue({ base: true, lg: false });
   const showMenu = !isMobile || !!match;
@@ -21,16 +20,16 @@ export default function SimpleParentView({
 
   if (showMenu)
     return (
-      <Flex flex={1} direction={floating ? "row" : "column"}>
+      <Flex data-type="parent-view" flex={1} direction={floating ? "row" : "column"}>
         <Box w={floating ? width : 0} flexGrow={0} flexShrink={0} />
         <Flex
-          width={width}
+          w={{ base: "full", lg: width }}
           direction="column"
           position={floating ? "fixed" : "initial"}
           top="var(--safe-top)"
           bottom="var(--safe-bottom)"
         >
-          {title && <SimpleHeader title={title} position="initial" />}
+          {title && <SimpleHeader title={title} />}
           <Flex direction="column" p="2" gap="2" overflowY="auto" overflowX="hidden">
             {children}
           </Flex>

src/hooks/use-root-padding.ts

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 
 export default function useRootPadding(padding?: { left?: string; top?: string; right?: string; bottom?: string }) {
   useEffect(() => {
-    const root = document.getElementById("root");
+    const root = document.body;
     if (!root) return;
 
     if (padding?.top) root.style.paddingTop = padding.top;

src/views/messages/chat.tsx

@@ -145,7 +145,7 @@ function DirectMessageChatPage({ pubkey }: { pubkey: string }) {
             <ChatLog messages={messages} />
             <TimelineActionAndStatus timeline={loader} />
           </Flex>
-          <SendMessageForm flexShrink={0} pubkey={pubkey} px="2" pb="2" />
+          <SendMessageForm flexShrink={0} pubkey={pubkey} p="2" />
           {location.state?.thread && (
             <ThreadDrawer isOpen onClose={closeDrawer} threadId={location.state.thread} pubkey={pubkey} />
           )}

src/views/messages/index.tsx

@@ -21,7 +21,6 @@ import { CheckIcon } from "../../components/icons";
 import UserDnsIdentity from "../../components/user/user-dns-identity";
 import useEventIntersectionRef from "../../hooks/use-event-intersection-ref";
 import { useKind4Decrypt } from "../../hooks/use-kind4-decryption";
-import SimpleParentView from "../../components/layout/presets/simple-parent-view";
 import ContainedParentView from "../../components/layout/presets/contained-parent-view";
 
 function MessagePreview({ message, pubkey }: { message: NostrEvent; pubkey: string }) {