fix: GenreTreeView uses h-full instead of h-screen

CHANGELOG.md

@@ -7,6 +7,14 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Fixed
 
+- `GenreTreeView`'s root now sizes with `h-full` instead of `h-screen`. `h-screen` (100vh) assumed
+  `GenreTreeView` was the only thing on the page, which is never true for a real consumer (nav
+  header, player bar, popups all share the viewport). Whenever `GenreTreeView` rendered below any
+  other content, its `h-screen` block extended past the actual visible viewport, pushing
+  `GenreTreeWheel`'s bottom-anchored zoom in/out controls below the fold — present in the DOM but
+  invisible without scrolling. `h-full` makes it fill its parent instead; consumers must give that
+  parent an explicit bounded height (as `apps/playground` and both `grow`/`hear`'s `Page` component
+  already do via `flex flex-col` + `min-h-0` chains).
 - `apps/playground` was pinned to `@behindthemusictree/genre-tree-view@0.4.0` directly, independent
   of `packages/app-kit`'s own `0.5.0` dependency, so the playground rendered `0.5.0`'s
   `GenreTreeWheel`/`GenreTree` markup (new absolutely-positioned pan/zoom stage) styled with

apps/playground/src/App.tsx

@@ -107,7 +107,16 @@ function AppContent() {
 
   return (
     <>
-      <div style={{ padding: 24, fontFamily: "system-ui, sans-serif" }}>
+      <div
+        style={{
+          padding: 24,
+          fontFamily: "system-ui, sans-serif",
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          minHeight: 0,
+        }}
+      >
         <h1>app-kit playground</h1>
         <p>
           Minimal harness exercising `popup` exports, `@behindthemusictree/ui` components, and
@@ -120,7 +129,13 @@ function AppContent() {
           {loading ? <RingLoader size={20} /> : null}
         </div>
 
-        {loading ? <Skeleton style={{ height: 32, width: 240 }} /> : <ReferenceGenreTree />}
+        {loading ? (
+          <Skeleton style={{ height: 32, width: 240 }} />
+        ) : (
+          <div style={{ flex: 1, minHeight: 0 }}>
+            <ReferenceGenreTree />
+          </div>
+        )}
       </div>
       <PopupHost />
     </>

packages/app-kit/src/genre-tree/GenreTreeView.tsx

@@ -85,7 +85,7 @@ export function GenreTreeView({
   );
 
   return (
-    <div className="mt-4 flex flex-col h-screen">
+    <div className="mt-4 flex flex-col h-full">
       <div className="actions-container flex justify-start">
         <div className="flex justify-start">{actions}</div>
       </div>