From c5231aee4e15673d3fd7053947b71c1c8ff30ed2 Mon Sep 17 00:00:00 2001
From: mignot <garcia.andreas.1991@gmail.com>
Date: Fri, 14 Aug 2026 19:34:25 +0200
Subject: [PATCH] fix: GenreTreeView uses h-full instead of h-screen

h-screen (100vh) assumed GenreTreeView was the only content on the
page, which is never true for a real consumer (nav header, player
bar, popups). Whenever it rendered below other content, its h-screen
block extended past the actual visible viewport, pushing
GenreTreeWheel's bottom-anchored zoom in/out controls below the fold.

h-full makes it fill its parent instead; apps/playground now gives it
a bounded height context, matching the flex/min-h-0 pattern grow and
hear already use via their Page component.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  8 ++++++++
 apps/playground/src/App.tsx                   | 19 +++++++++++++++++--
 .../app-kit/src/genre-tree/GenreTreeView.tsx  |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 836dda2..b058427 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/playground/src/App.tsx b/apps/playground/src/App.tsx
index c53b8cd..e95a2a9 100644
--- a/apps/playground/src/App.tsx
+++ b/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 />
     </>
diff --git a/packages/app-kit/src/genre-tree/GenreTreeView.tsx b/packages/app-kit/src/genre-tree/GenreTreeView.tsx
index 3489588..5502dcb 100644
--- a/packages/app-kit/src/genre-tree/GenreTreeView.tsx
+++ b/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>