lfg2025/archy
1
0
Fork 0
Code Issues 25 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

fix: resolve content clipping on mobile by moving tab padding to scroll container

Browse Source 
Moves dynamic pt-20/pt-40 padding from perspective-container-wrapper (which
shrank the content area) to the inner scroll container via computed style.
Removes spacer divs in CloudFolder, AppDetails, MarketplaceAppDetails.
Reduces excessive bottom padding in Marketplace. Hides Cloud/Network tabs
in CloudFolder detail view. Teleports mobile back buttons to body to escape
CSS transform containing block.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-05 10:14:10 +00:00
co-authored by Claude Opus 4.6
parent 255b52eb6d
commit 11cee9dc70
9 changed files with 131 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Marketplace.vue
+18 -21
View File
@@ -1,7 +1,7 @@
<template>
<div class="marketplace-container flex flex-col h-full overflow-hidden -mt-4 md:mt-0">
<div class="marketplace-container flex flex-col h-full overflow-hidden md:-mt-4">
<!-- Fixed Header Section -->
<div class="flex-shrink-0 -mt-4 md:mt-0">
<div class="flex-shrink-0 md:-mt-4">
<!-- Installation Progress Banner - Multiple Apps -->
<div v-if="installingApps.size > 0" class="mb-6 space-y-3">
<div
@@ -106,19 +106,19 @@
/>
</div>
<!-- Search Bar (Mobile - placeholder for later) -->
<div class="md:hidden mb-6">
<!-- Search Bar (Mobile) -->
<div class="md:hidden mb-4">
<input
v-model="searchQuery"
type="text"
placeholder="Search apps..."
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/40 transition-colors"
class="w-full px-4 py-3 md:py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:border-white/40 transition-colors"
/>
</div>
</div>
<!-- Scrollable Apps Section -->
<div class="flex-1 overflow-y-auto pr-2 -mr-2 pb-48">
<div class="flex-1 overflow-y-auto pr-2 -mr-2 pb-4">
<!-- Apps Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
@@ -203,19 +203,18 @@
</div>
<!-- End Scrollable Apps Section -->
<!-- Floating Filter Button (Mobile only) -->
<button
@click="showFilterModal = true"
class="md:hidden fixed right-4 z-40 w-14 h-14 rounded-full glass-button flex items-center justify-center shadow-2xl"
:style="{
bottom: bottomPosition,
filter: 'drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5))'
}"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</button>
<!-- Floating Filter Button (teleported to escape CSS transform containing block) -->
<Teleport to="body">
<button
@click="showFilterModal = true"
class="md:hidden fixed right-4 z-40 w-14 h-14 rounded-full glass-button flex items-center justify-center shadow-2xl mobile-back-btn"
style="left: auto;"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</button>
</Teleport>
<!-- Filter Modal (Mobile only) -->
<Transition name="modal">
@@ -304,13 +303,11 @@ import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { rpcClient } from '@/api/rpc-client'
import { useMarketplaceApp } from '@/composables/useMarketplaceApp'
import { useMobileBackButton } from '@/composables/useMobileBackButton'
import { useModalKeyboard } from '@/composables/useModalKeyboard'
const router = useRouter()
const store = useAppStore()
const { setCurrentApp } = useMarketplaceApp()
const { bottomPosition } = useMobileBackButton()
// Category state
const selectedCategory = ref('all')