romtuck/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve mobile viewport and sticky nav

Browse Source 
- Add viewport-fit=cover and maximum-scale=1.0 to prevent iOS sizing issues
- Add overflow:hidden on html/body to prevent content overflow
- Add iOS safe-area-inset padding for notch support
- Make topbar and nav sticky on mobile/tablet (≤1100px)

Fixes viewport being ~15% too large on iPhone and nav scrolling away on mobile.
This commit is contained in:
Austin S. Lin 2026-01-29 07:55:00 -05:00
parent 5f4715acfc
commit 7186600608
3 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<title>Moltbot Control</title>
<meta name="color-scheme" content="dark light" />
<link rel="icon" href="/favicon.ico" sizes="any" />

10
ui/src/styles/base.css
View File

@ -194,6 +194,16 @@
html,
body {
height: 100%;
overflow: hidden;
}
/* iOS safe area support */
@supports (padding: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
body {

13
ui/src/styles/layout.mobile.css
View File

@ -2,8 +2,15 @@
Mobile Layout
=========================================== */
/* Tablet: Horizontal nav */
/* Tablet: Horizontal nav - sticky header */
@media (max-width: 1100px) {
/* Keep topbar sticky on mobile */
.topbar {
position: sticky;
top: 0;
z-index: 40;
}
.nav {
display: flex;
flex-direction: row;
@ -13,6 +20,10 @@
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Sticky nav below topbar */
position: sticky;
top: var(--shell-topbar-height, 56px);
z-index: 30;
}
.nav::-webkit-scrollbar {