diff --git a/ui/index.html b/ui/index.html
index 3100a1973..e00e673ff 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -2,7 +2,7 @@
-
+
Moltbot Control
diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index f77cff9ed..8a67fc98f 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -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 {
diff --git a/ui/src/styles/layout.mobile.css b/ui/src/styles/layout.mobile.css
index 450a83608..7d97fe397 100644
--- a/ui/src/styles/layout.mobile.css
+++ b/ui/src/styles/layout.mobile.css
@@ -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 {