# Fix Content Clipping + Hide Network Tabs in CloudFolder ## Context Content clips/cuts off before reaching the bottom across CloudFolder, Marketplace, AppDetails — both desktop and mobile. Fixed UI elements (toolbars, search) must stay sticky while scrollable content extends to the tab bar (mobile) or viewport bottom (desktop). Also: hide Cloud/Network switcher on mobile in CloudFolder detail view. ## Root Cause `.perspective-container-wrapper` has `height: 100%` + `overflow: hidden` + dynamic `pt-20`/`pt-40`. With `box-sizing: border-box`, the padding shrinks the content area by 80-160px on mobile. ```
← reserves tab bar space (correct) .perspective-container-wrapper h-100% pt-20 ← padding SHRINKS content area (BUG) .perspective-container h-100% overflow-hidden .view-wrapper absolute inset-0 content div overflow-y-auto h-full ← scroll viewport 80-160px too small ``` ## Solution: Move padding from wrapper to scroll container ### File 1: `neode-ui/src/views/Dashboard.vue` [DONE] **A. Add computed** (~line 440): ```ts const mobileTabPaddingTop = computed(() => { if (typeof window === 'undefined' || window.innerWidth >= 768) return 0 if (showAppsTabs.value && showNetworkTabs.value) return 160 if (showAppsTabs.value || showNetworkTabs.value) return 80 return 0 }) ``` **B. Remove padding from wrapper** (line 258): Remove `'pt-40': showAppsTabs && showNetworkTabs, 'pt-20': showAppsTabs !== showNetworkTabs` from `:class`. **C. Apply offset to content div instead** (lines 269-277): ```html
``` - When mobile tabs showing: `:style` overrides `pt-4` with dynamic value - When no tabs (or desktop): `:style` is undefined, Tailwind `pt-4 md:pt-8` applies - Bottom padding reduced from `pb-28 md:pb-24` to `pb-4 md:pb-8` (main's `pb-20` already handles tab bar) **D. Hide Cloud/Network tabs in CloudFolder** (line 451): ```ts if (route.name === 'cloud-folder') return false ``` ### File 2: `neode-ui/src/views/CloudFolder.vue` [DONE] Delete spacer div at line 156. ### File 3: `neode-ui/src/views/AppDetails.vue` [DONE] Delete spacer div at line 377. ### File 4: `neode-ui/src/views/MarketplaceAppDetails.vue` [DONE] Delete spacer div at line 324. ### File 5: `neode-ui/src/views/Marketplace.vue` [DONE] Change `pb-48` → `pb-4` on line 121. ## Safety - 3D transitions preserved: `overflow: hidden` stays on wrapper + perspective-container - Chat view unaffected: has its own branch bypassing the content div - Desktop unaffected: `mobileTabPaddingTop` returns 0 - Back button space preserved: `needsMobileBackButtonSpace` still adds extra bottom padding ## Verification [DONE] 1. `cd neode-ui && npm run build` 2. `./scripts/deploy-to-target.sh --live` 3. Test all views on mobile + desktop: CloudFolder, Marketplace, AppDetails, Chat, Home, page transitions