refactor: implement scroll container context and flex layout

Switch from fixed positioning to a flexbox-based layout for the
main application structure. This introduces a `ScrollContainerCtx` to
provide access to the main scrollable element, allowing child
components like `FileTree` and `RevealManager` to perform accurate
scrolling and positioning relative to the container instead of the
window.

refactor: set JournalPanel height to full

src/components/RevealManager.tsx

@@ -18,6 +18,7 @@ import {
 import { Portal } from "solid-js/web";
 import { useLocation } from "@solidjs/router";
 import { useArticleDom } from "./Article";
+import { useScrollContainer } from "../App";
 import { journalStreamState } from "./stores/journalStream";
 import { useJournalCompletions } from "./journal/completions";
 import {
@@ -75,6 +76,7 @@ function hide() {
 
 export const RevealManager: Component = () => {
   const contentDom = useArticleDom();
+  const scrollContainer = useScrollContainer();
   const location = useLocation();
   const comp = useJournalCompletions();
 
@@ -179,8 +181,16 @@ export const RevealManager: Component = () => {
           <button
             class={`fixed z-50 inline-flex items-center justify-center w-5 h-5 rounded cursor-pointer ${btn().color}`}
             style={{
-              top: `${btn().rect.top + window.scrollY - 6}px`,
-              left: `${btn().rect.left + window.scrollX - 20}px`,
+              top: `${
+                btn().rect.top +
+                (scrollContainer()?.scrollTop ?? window.scrollY) -
+                6
+              }px`,
+              left: `${
+                btn().rect.left +
+                (scrollContainer()?.scrollLeft ?? window.scrollX) -
+                20
+              }px`,
             }}
             title={btn().title}
             innerHTML={btn().svg}