From 872cf3082a7c075a78bb11763b2c9b101c162de6 Mon Sep 17 00:00:00 2001 From: Max Litruv Boonzaayer Date: Thu, 30 Jan 2025 05:30:19 +1100 Subject: [PATCH] Update viewport settings and enhance layout for better responsiveness --- index.html | 2 +- styles.css | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index b207232..0e87de2 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Documentation Viewer diff --git a/styles.css b/styles.css index 4c8fb31..5961d6b 100644 --- a/styles.css +++ b/styles.css @@ -24,7 +24,12 @@ body { .container { display: flex; flex-direction: column; - height: 100vh; + min-height: 100vh; + height: 100%; + position: fixed; + width: 100%; + top: 0; + left: 0; } .title-bar { @@ -59,6 +64,7 @@ body { display: flex; flex: 1; overflow: hidden; + height: calc(100% - var(--title-bar-height)); } .sidebar { @@ -74,9 +80,7 @@ body { border-right: 1px solid var(--ifm-border-color); display: flex; flex-direction: column; - min-height: calc(100vh - var(--title-bar-height)); - position: sticky; - top: var(--title-bar-height); + height: 100%; } #file-index { @@ -415,11 +419,9 @@ body { position: fixed; left: -100%; top: var(--title-bar-height); - bottom: 0; + height: calc(100% - env(safe-area-inset-top) - var(--title-bar-height)); z-index: 100; transition: var(--sidebar-transition); - min-height: unset; /* Remove min-height for mobile */ - height: calc(100% - var(--title-bar-height)); } .right-sidebar { @@ -433,6 +435,8 @@ body { .content { padding: 1.5rem; + height: calc(100% - env(safe-area-inset-top)); + -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */ } .social-links {