From 58cdbd05b430ebcf0184a451cf8b2efaa90072e3 Mon Sep 17 00:00:00 2001
From: Kinyoo <Kinyoo1126@gmail.com>
Date: Tue, 7 Jul 2026 17:59:45 +0800
Subject: [PATCH] fix(client): pin explore & knowledge-square to 100dvh on
 mobile so inner scrollers work

After html/body scrolling was globally disabled (WebView bottom-strip fix), these mobile pages' h-full collapsed under the h-auto MainLayout shell and nothing scrolled; pin them to 100dvh (<=767px) so their own overflow-y-auto becomes the scroller.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/frontend/client/src/pages/apps/explore.tsx    | 13 +++++++------
 src/frontend/client/src/pages/knowledge/index.tsx |  6 +++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/frontend/client/src/pages/apps/explore.tsx b/src/frontend/client/src/pages/apps/explore.tsx
index c4f5edb26..43dfc6fb2 100644
--- a/src/frontend/client/src/pages/apps/explore.tsx
+++ b/src/frontend/client/src/pages/apps/explore.tsx
@@ -157,12 +157,13 @@ export default function ExplorePlaza() {
         <div
             className={cn(
                 'flex h-full min-h-0 w-full flex-1 flex-col items-center overflow-hidden bg-white',
-                // Mobile explore renders in document-scroll mode (not innerScrollShell in
-                // MainLayout), so h-full/flex-1 collapse to content height and the region has
-                // no height for the empty/loading content to position against. In those states
-                // (no scrollable grid) pin the page to one viewport tall so the region below the
-                // header becomes a real, measurable area. Gated by state → has-content path untouched.
-                (loading || agents.length === 0) && 'max-[767px]:h-[100dvh]',
+                // Mobile explore is not innerScrollShell in MainLayout (h-auto shell) and
+                // html/body scrolling is globally disabled (WebView bottom-strip fix in
+                // index.html), so h-full/flex-1 collapse to content height and nothing can
+                // scroll. Pin the page to one viewport tall on mobile so <main>'s
+                // overflow-y-auto becomes the scroller (also gives empty/loading states a
+                // real height to center against).
+                'max-[767px]:h-[100dvh]',
             )}
         >
             {/* 顶部横幅：与知识广场一致 — 跟随主题的品牌色渐变底（brand-50 → white） */}
diff --git a/src/frontend/client/src/pages/knowledge/index.tsx b/src/frontend/client/src/pages/knowledge/index.tsx
index 486a61ef0..316e1b9eb 100644
--- a/src/frontend/client/src/pages/knowledge/index.tsx
+++ b/src/frontend/client/src/pages/knowledge/index.tsx
@@ -631,7 +631,11 @@ export default function Knowledge() {
     // Knowledge square view
     if (showKnowledgeSquare) {
         return (
-            <div className="relative flex h-full min-h-0">
+            // Mobile: the MainLayout shell is h-auto/overflow-visible and html/body
+            // scrolling is globally disabled (WebView bottom-strip fix in index.html),
+            // so `h-full` collapses and the square's inner scroller never scrolls.
+            // Pin the wrapper to 100dvh on mobile so the inner overflow-y-auto works.
+            <div className="relative flex h-full min-h-0 max-[767px]:h-[100dvh]">
                 <KnowledgeSquare
                     onBack={() => {
                         setShowKnowledgeSquare(false);