web: music dock joins the layout flow — removes the nav-dock overlap hacks

The music dock was position:fixed, overlaying the bottom of the content, so the
nav dock needed a pile of hacks to dodge it: a hand-measured MUSIC_DOCK_HEIGHT
(72) constant, a presence flag, a translateY lift, and a matching hover-threshold
lift (via a ref) so it wouldn't slide away under the cursor. Fragile the moment
the music dock's height changed.

Now the dock is an in-flow bottom bar that reserves its own height:
- DashboardLayout is a flex column: the content region (flex-1, min-h-0) shrinks
  when the music dock takes its space; MusicPlayerHost renders an in-flow bar
  (shrink-0) instead of a fixed overlay.
- The nav Dock is absolute within the content region and measures its reveal/hide
  boundary from that region's bottom edge (a boundaryRef) — so it always sits just
  above whatever's at the bottom, music dock or not, with zero knowledge of it.
- Deleted MUSIC_DOCK_HEIGHT, musicDockPresent, the lift, and the transform hack.

Bonus: content at the very bottom is no longer hidden under the fixed dock.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Layout/DashboardLayout.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { useDock, MusicPlayerHost } from 'officerdev';
 import { Background } from './Background';
 import { Header } from './Header';
@@ -12,20 +13,19 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   const { items: visibleItems } = useDock(ALL_DOCK_ITEMS, DEFAULT_DOCK_PATHS);
   const isTouch = useIsTouch();
   usePageTitleSync();
+  // The content region shrinks when the (in-flow) music dock takes its space; the nav dock measures its
+  // reveal boundary from this element, so it always sits just above whatever's at the bottom.
+  const regionRef = useRef<HTMLElement | null>(null);
 
   return (
-    <div className="relative overflow-hidden h-dvh outline-none inset-0">
+    <div className="relative flex h-dvh flex-col overflow-hidden outline-none inset-0">
       <Header dockItems={visibleItems} />
-      <section className="relative h-dvh snap-start overflow-hidden">
+      <section ref={regionRef} className="relative min-h-0 flex-1 snap-start overflow-hidden">
         <Background />
-        {!isTouch && <Dock items={visibleItems} className="hidden md:flex" />}
-        <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">
-          {children}
-        </div>
+        {!isTouch && <Dock items={visibleItems} boundaryRef={regionRef} className="hidden md:flex" />}
+        <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-2 overflow-y-auto">{children}</div>
       </section>
       <MusicPlayerHost />
     </div>
   );
-};
-
-
+}