Problem: The floating AppDock (position: fixed at bottom-2/3) overlapped
the last row of long pages on mobile — e.g. meeting #7 on the Meetings
page was hidden behind the dock with no way to scroll it into view.
Fix:
- AppDock measures its rendered outer-bottom extent (height + bottom
offset + safe-area inset) via getBoundingClientRect() and publishes
it as `--app-dock-height` on documentElement, with a small 8px gap
so the last row doesn't kiss the dock.
- Re-measures on ResizeObserver, window resize, and orientationchange
so the value stays correct across rotation, URL-bar collapse, and
dock content changes.
- Clears the variable on unmount and whenever the dock hides
(≤1 other app), so pages without a dock get no extra padding.
- Global rule in index.css: `body { padding-bottom: var(--app-dock-height, 0px) }`,
scoped to `@media not print` so PDF exports stay unaffected.
Files:
- artifacts/tx-os/src/components/app-dock.tsx
- artifacts/tx-os/src/index.css
No deviations from the task plan.
riyadhafraa
7609fa95e7