Task #459: Hide iPad Safari URL bar across all apps (notes + home)
Problem: On iPad Safari, the executive-meetings app collapsed the URL bar on scroll (native-app feel), but Notes and Home kept it visible permanently because their root containers were not document-scrollable. - notes.tsx used `h-screen ... overflow-hidden` with an internal `flex-1 min-h-0 overflow-y-auto` scroll region. - home.tsx used `min-h-screen ... overflow-hidden`. With no document-level scroll, iOS Safari has no trigger to hide the URL bar. Fix (quick-fix path the user picked, no PWA install meta): - notes.tsx: root → `min-h-[100dvh] os-bg flex flex-col` (removed `overflow-hidden`, swapped `h-screen` → `min-h-[100dvh]`). Header now `sticky top-0 z-10` so it stays pinned. Inner body wrapper changed from `flex-1 min-h-0 overflow-y-auto flex flex-col` to `flex-1 flex flex-col` so the document (not an inner div) scrolls — giving Safari the trigger it needs. - home.tsx: root → `min-h-[100dvh] os-bg flex flex-col relative` (removed `overflow-hidden`). Why `100dvh`: dynamic viewport height sizes against the *visible* area, so the layout reflows cleanly when the URL bar appears/hides. Out of scope (matches task): no PWA meta tags, no other pages touched (spot-checked others: chat/services/orders/notifications/admin already use min-h-screen without overflow-hidden), no styling changes, executive- meetings page untouched (it's the reference). Verification: tsc --noEmit clean. Pre-existing test workflow failure on unrelated executive-meetings.ts type errors is out of scope.
This commit is contained in:
@@ -497,7 +497,12 @@ export default function HomePage() {
|
||||
const initials = (displayName || "?").trim().slice(0, 1).toUpperCase();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen os-bg flex flex-col overflow-hidden relative">
|
||||
// Task #459: removed `overflow-hidden` and switched to `min-h-[100dvh]`
|
||||
// so iOS Safari can collapse its URL bar on scroll, matching the
|
||||
// executive-meetings page behavior. `100dvh` (dynamic viewport
|
||||
// height) sizes against the visible area, so the layout reflows
|
||||
// cleanly when the URL bar shows/hides.
|
||||
<div className="min-h-[100dvh] os-bg flex flex-col relative">
|
||||
{/*
|
||||
Status Bar
|
||||
--------------------------------------------------------------
|
||||
|
||||
@@ -303,8 +303,15 @@ export default function NotesPage() {
|
||||
view === "active" && folderSelection.kind !== "shared-folder";
|
||||
|
||||
return (
|
||||
// Task #459: switched from a fixed-viewport `h-screen overflow-hidden`
|
||||
// shell to a document-scrolling layout (`min-h-[100dvh]`) so iOS
|
||||
// Safari can collapse its URL bar on scroll, matching the executive
|
||||
// meetings page. The header below is `sticky top-0` so it stays
|
||||
// pinned while the document scrolls; `100dvh` (dynamic viewport
|
||||
// height) sizes against the *visible* area, so the layout reflows
|
||||
// cleanly when the URL bar appears/disappears.
|
||||
<div
|
||||
className="h-screen os-bg flex flex-col overflow-hidden"
|
||||
className="min-h-[100dvh] os-bg flex flex-col"
|
||||
dir={isRtl ? "rtl" : "ltr"}
|
||||
data-testid="notes-page"
|
||||
>
|
||||
@@ -312,7 +319,7 @@ export default function NotesPage() {
|
||||
icons / search / tabs so the bar is easier to read on big
|
||||
screens. Sizing kept responsive (flex-wrap) so it still folds
|
||||
nicely on narrow widths. */}
|
||||
<div className="glass-panel border-b border-slate-200/70 px-6 py-5 shrink-0">
|
||||
<div className="glass-panel border-b border-slate-200/70 px-6 py-5 shrink-0 sticky top-0 z-10">
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<button
|
||||
onClick={() => setLocation("/")}
|
||||
@@ -467,7 +474,11 @@ export default function NotesPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-y-auto flex flex-col">
|
||||
{/* Task #459: inner scroll container removed (was
|
||||
`flex-1 min-h-0 overflow-y-auto`) — content now scrolls with
|
||||
the document so iOS Safari collapses the URL bar on scroll.
|
||||
The sticky header above keeps the controls pinned. */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{showTopComposer && (
|
||||
<div
|
||||
className="px-4 pt-1 max-w-6xl w-full mx-auto"
|
||||
|
||||
Reference in New Issue
Block a user