From 0168ca381a5d1caf43503911e01a620ff43e7308 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:00:56 +0000 Subject: [PATCH 01/13] fix: lock scroll on mobile homepage and fill viewport - Add html/body overflow:hidden for landing page on mobile - Use 100svh for dynamic viewport height (address bar responsive) - Change content overflow from auto to hidden - Use exact height:100% instead of min-height for homepage root --- theme/style.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/theme/style.css b/theme/style.css index ab7ab2f..b6d0b93 100644 --- a/theme/style.css +++ b/theme/style.css @@ -1,9 +1,21 @@ -/* Mobile viewport: position landing page content below nav bar */ +/* Mobile landing page: fill viewport, no scroll */ @media (max-width: 1080px) { + /* Lock scroll at document level for landing page */ + html:has([data-layout="landing"]) { + overflow: hidden; + height: 100svh; + } + + html:has([data-layout="landing"]) body { + overflow: hidden; + height: 100%; + } + + /* Position content area to fill space below nav bar */ [data-layout="landing"] [class*="DocsLayout_content"] { position: fixed; inset: var(--vocs-topNav_height) 0 0 0; - overflow-y: auto; + overflow: hidden; } } @@ -12,5 +24,5 @@ display: flex; flex-direction: column; justify-content: center; - min-height: 100%; + height: 100%; } From dba28de89ddce7cd09183790cbb3c753b2c1156c Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:07:34 +0000 Subject: [PATCH 02/13] fix: use dvh for dynamic viewport sizing on mobile homepage - Use 100dvh instead of 100svh for address bar responsiveness - Remove overflow:hidden - content should fit naturally - Keep fixed positioning for content area below nav --- theme/style.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/theme/style.css b/theme/style.css index b6d0b93..6f5b6f3 100644 --- a/theme/style.css +++ b/theme/style.css @@ -1,21 +1,18 @@ -/* Mobile landing page: fill viewport, no scroll */ +/* Mobile landing page: fit content to viewport */ @media (max-width: 1080px) { - /* Lock scroll at document level for landing page */ + /* Size document to dynamic viewport height */ html:has([data-layout="landing"]) { - overflow: hidden; - height: 100svh; + height: 100dvh; } html:has([data-layout="landing"]) body { - overflow: hidden; height: 100%; } - /* Position content area to fill space below nav bar */ + /* Content area fills space below nav bar */ [data-layout="landing"] [class*="DocsLayout_content"] { position: fixed; inset: var(--vocs-topNav_height) 0 0 0; - overflow: hidden; } } From a44e8481813580c00cddd6216fdc9695443a87d8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:12:40 +0000 Subject: [PATCH 03/13] fix: use .vocs_HomePage_root selector and inset:0 for mobile homepage - Target homepage specifically via :has(.vocs_HomePage_root) - Use inset:0 to fill entire viewport - More elegant selector than data-layout attribute --- theme/style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/theme/style.css b/theme/style.css index 6f5b6f3..ceaecdf 100644 --- a/theme/style.css +++ b/theme/style.css @@ -1,23 +1,23 @@ -/* Mobile landing page: fit content to viewport */ +/* Mobile homepage: fit everything to viewport */ @media (max-width: 1080px) { - /* Size document to dynamic viewport height */ - html:has([data-layout="landing"]) { + /* Target pages with HomePage component */ + html:has(.vocs_HomePage_root) { height: 100dvh; } - html:has([data-layout="landing"]) body { + html:has(.vocs_HomePage_root) body { height: 100%; } - /* Content area fills space below nav bar */ - [data-layout="landing"] [class*="DocsLayout_content"] { + /* Fill entire viewport */ + :has(.vocs_HomePage_root) [class*="DocsLayout_content"] { position: fixed; - inset: var(--vocs-topNav_height) 0 0 0; + inset: 0; } } /* Center homepage content vertically */ -[data-layout="landing"] .vocs_HomePage_root { +.vocs_HomePage_root { display: flex; flex-direction: column; justify-content: center; From 127a6b201be33d348442c29e9eb50d135ec52274 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:17:44 +0000 Subject: [PATCH 04/13] fix: target only index page with custom .landing-index class - Add className to HomePage.Root in index.mdx - CSS targets only this specific page, not all HomePage components --- docs/pages/index.mdx | 2 +- theme/style.css | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx index 7135588..e6d1cf3 100644 --- a/docs/pages/index.mdx +++ b/docs/pages/index.mdx @@ -5,7 +5,7 @@ showLogo: false import { HomePage } from 'vocs/components' - + Build any physical design app, network included diff --git a/theme/style.css b/theme/style.css index ceaecdf..f5e8e53 100644 --- a/theme/style.css +++ b/theme/style.css @@ -1,23 +1,22 @@ -/* Mobile homepage: fit everything to viewport */ +/* Mobile landing index: fit page to viewport */ @media (max-width: 1080px) { - /* Target pages with HomePage component */ - html:has(.vocs_HomePage_root) { + html:has(.landing-index) { height: 100dvh; } - html:has(.vocs_HomePage_root) body { + html:has(.landing-index) body { height: 100%; } /* Fill entire viewport */ - :has(.vocs_HomePage_root) [class*="DocsLayout_content"] { + :has(.landing-index) [class*="DocsLayout_content"] { position: fixed; inset: 0; } } -/* Center homepage content vertically */ -.vocs_HomePage_root { +/* Center landing index content vertically */ +.landing-index { display: flex; flex-direction: column; justify-content: center; From 2f0898b05570960969998cc22feef37def62662b Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:18:53 +0000 Subject: [PATCH 05/13] fix: add padding-top for nav bar height on mobile homepage - Content uses inset:0 to fill viewport - padding-top accounts for nav bar space --- theme/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/theme/style.css b/theme/style.css index f5e8e53..1e97567 100644 --- a/theme/style.css +++ b/theme/style.css @@ -8,10 +8,11 @@ height: 100%; } - /* Fill entire viewport */ + /* Fill entire viewport, account for nav bar */ :has(.landing-index) [class*="DocsLayout_content"] { position: fixed; inset: 0; + padding-top: var(--vocs-topNav_height); } } From 31ab7546db6bc6b45c81cdc58b7e45ad7040d60b Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:19:57 +0000 Subject: [PATCH 06/13] fix: remove unnecessary padding-top, content already below nav --- theme/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/theme/style.css b/theme/style.css index 1e97567..f5e8e53 100644 --- a/theme/style.css +++ b/theme/style.css @@ -8,11 +8,10 @@ height: 100%; } - /* Fill entire viewport, account for nav bar */ + /* Fill entire viewport */ :has(.landing-index) [class*="DocsLayout_content"] { position: fixed; inset: 0; - padding-top: var(--vocs-topNav_height); } } From b9b610fb5a9055db5ab8550cb9d83eb2570c4e50 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:21:02 +0000 Subject: [PATCH 07/13] fix: position content below nav bar to fit viewport together - Nav bar at top + content below = full viewport - Content uses inset with topNav_height offset --- theme/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/style.css b/theme/style.css index f5e8e53..e7bf529 100644 --- a/theme/style.css +++ b/theme/style.css @@ -8,10 +8,10 @@ height: 100%; } - /* Fill entire viewport */ + /* Content fills space below nav bar */ :has(.landing-index) [class*="DocsLayout_content"] { position: fixed; - inset: 0; + inset: var(--vocs-topNav_height) 0 0 0; } } From 517d938f713e9492de4e91bbfa772cee6abaaea8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:26:09 +0000 Subject: [PATCH 08/13] fix: target vocs_DocsLayout_content only when containing landing-index - Use :has() to scope to landing page only - Container with nav+content+footer fills viewport with inset:0 --- theme/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/theme/style.css b/theme/style.css index e7bf529..f238c1c 100644 --- a/theme/style.css +++ b/theme/style.css @@ -8,10 +8,10 @@ height: 100%; } - /* Content fills space below nav bar */ - :has(.landing-index) [class*="DocsLayout_content"] { + /* Layout container (nav + content + footer) fills viewport */ + .vocs_DocsLayout_content:has(.landing-index) { position: fixed; - inset: var(--vocs-topNav_height) 0 0 0; + inset: 0; } } From 20bd36d8601fe7a1e022ce867600570ad36c569d Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:28:06 +0000 Subject: [PATCH 09/13] fix: add topNav height offset to inset --- theme/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/style.css b/theme/style.css index f238c1c..c7b2a13 100644 --- a/theme/style.css +++ b/theme/style.css @@ -11,7 +11,7 @@ /* Layout container (nav + content + footer) fills viewport */ .vocs_DocsLayout_content:has(.landing-index) { position: fixed; - inset: 0; + inset: var(--vocs-topNav_height) 0 0 0; } } From 0ef9d06dc300c010b6edffa5a770710ff1cb0ba6 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:31:07 +0000 Subject: [PATCH 10/13] fix: use safe-area-inset-bottom for mobile browser UI --- theme/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/theme/style.css b/theme/style.css index c7b2a13..a2b9f52 100644 --- a/theme/style.css +++ b/theme/style.css @@ -11,7 +11,10 @@ /* Layout container (nav + content + footer) fills viewport */ .vocs_DocsLayout_content:has(.landing-index) { position: fixed; - inset: var(--vocs-topNav_height) 0 0 0; + top: var(--vocs-topNav_height); + left: 0; + right: 0; + bottom: env(safe-area-inset-bottom, 0); } } From 39abb9b014dea6277f07e5115f864c2ba0a59114 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:33:54 +0000 Subject: [PATCH 11/13] fix: use flex layout for landing container to fit content and footer --- theme/style.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/theme/style.css b/theme/style.css index a2b9f52..6c5c881 100644 --- a/theme/style.css +++ b/theme/style.css @@ -8,13 +8,25 @@ height: 100%; } - /* Layout container (nav + content + footer) fills viewport */ + /* Layout container fills viewport */ .vocs_DocsLayout_content:has(.landing-index) { position: fixed; top: var(--vocs-topNav_height); left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0); + display: flex; + flex-direction: column; + } + + /* Main content area fills available space */ + .vocs_DocsLayout_content:has(.landing-index) > * { + flex-shrink: 0; + } + + .vocs_DocsLayout_content:has(.landing-index) .landing-index { + flex: 1; + min-height: 0; } } From ebf63349aaa3c823daaa485ad4c6d89213b5ca70 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:38:00 +0000 Subject: [PATCH 12/13] fix: allow landing-index to shrink with flex: 1 1 auto --- theme/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/style.css b/theme/style.css index 6c5c881..132cc91 100644 --- a/theme/style.css +++ b/theme/style.css @@ -25,7 +25,7 @@ } .vocs_DocsLayout_content:has(.landing-index) .landing-index { - flex: 1; + flex: 1 1 auto; min-height: 0; } } From 1aa8840d89120fd14779a011b85f48bee2126259 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Jan 2026 07:44:14 +0000 Subject: [PATCH 13/13] fix: use height calc with dvh instead of fixed bottom positioning - height: calc(100dvh - topNav_height) responds to browser UI - Added overflow: hidden to prevent any scrolling - Container height explicitly tied to dynamic viewport --- theme/style.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/theme/style.css b/theme/style.css index 132cc91..b8bc27e 100644 --- a/theme/style.css +++ b/theme/style.css @@ -2,31 +2,36 @@ @media (max-width: 1080px) { html:has(.landing-index) { height: 100dvh; + overflow: hidden; } html:has(.landing-index) body { height: 100%; + overflow: hidden; } - /* Layout container fills viewport */ + /* Layout container uses height instead of fixed bottom */ .vocs_DocsLayout_content:has(.landing-index) { position: fixed; top: var(--vocs-topNav_height); left: 0; right: 0; - bottom: env(safe-area-inset-bottom, 0); + height: calc(100dvh - var(--vocs-topNav_height)); display: flex; flex-direction: column; + overflow: hidden; } - /* Main content area fills available space */ + /* Children don't shrink by default */ .vocs_DocsLayout_content:has(.landing-index) > * { flex-shrink: 0; } + /* Landing content fills and can shrink */ .vocs_DocsLayout_content:has(.landing-index) .landing-index { flex: 1 1 auto; min-height: 0; + overflow: hidden; } } @@ -35,5 +40,4 @@ display: flex; flex-direction: column; justify-content: center; - height: 100%; }