fix: mobile onboarding viewport + filebrowser demo fixes

Onboarding:
- Fixed viewport to use dvh units with position:fixed container
- All views use scrollable glass containers that fit within viewport
- Responsive typography and spacing (mobile-first breakpoints)
- Tighter padding/margins on small screens
- RootRedirect checks localStorage first for instant redirect
- Spinner only appears after 500ms delay to avoid flash

Filebrowser:
- Fix CloudFolder null initialPath crash (watch both useNativeUI + section)
- Remove unused `host` computed (was causing TS error)
- Add mock GET /app/filebrowser/ landing page
- Increase express.json limit to 50mb

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-09 19:32:28 +00:00
co-authored by Claude Opus 4.6
parent 4bc0c4b483
commit a6c1820a83
13 changed files with 153 additions and 83 deletions
+16 -3
View File
@@ -1,5 +1,5 @@
<template>
<div class="min-h-screen relative overflow-hidden">
<div class="onb-viewport relative overflow-hidden">
<!-- Background layers with 3D perspective and zoom effect -->
<div class="bg-perspective-container">
<!-- Video background for intro/login routes (smooth transition from splash) -->
@@ -356,11 +356,20 @@ onMounted(() => {
</script>
<style scoped>
/* Fixed viewport container — locks to screen on mobile, no bounce/overflow */
.onb-viewport {
height: 100vh;
height: 100dvh;
width: 100%;
position: fixed;
inset: 0;
}
/* Wrapper to contain perspective without clipping */
.perspective-container-wrapper {
position: relative;
overflow: hidden;
min-height: 100vh;
height: 100%;
}
/* Perspective container for 3D depth effect */
@@ -368,7 +377,7 @@ onMounted(() => {
perspective: 1200px;
perspective-origin: 50% 50%;
position: relative;
min-height: 100vh;
height: 100%;
overflow: hidden;
}
@@ -379,10 +388,14 @@ onMounted(() => {
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform, opacity;
overflow: hidden;
}
.view-container {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* 2advanced-style: fluid depth transitions */