fix: standardize direct page scroll viewports

webui/src/components/PageScrollViewport.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type PageScrollViewportProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "children"
+> & {
+  children: ReactNode;
+};
+
+export default function PageScrollViewport({
+  children,
+  className = "",
+  ...props
+}: PageScrollViewportProps) {
+  return (
+    <div
+      {...props}
+      className={["page-scroll-viewport", className].filter(Boolean).join(" ")}
+    >
+      {children}
+    </div>
+  );
+}

webui/src/components/ViewSurfaceRouteBoundary.tsx

@@ -6,6 +6,7 @@ import { dispatchPlatformViewChanged } from "../platform/views";
 import { useGuardedNavigate } from "./UnsavedChangesGuard";
 import Button from "./Button";
 import Card from "./Card";
+import PageScrollViewport from "./PageScrollViewport";
 
 export default function ViewSurfaceRouteBoundary({
   surfaceId,
@@ -33,26 +34,28 @@ export default function ViewSurfaceRouteBoundary({
   }
 
   return (
-    <div className="content-pad">
-      <Card title="Outside the current view">
-        <div className="empty-state">
-          <EyeOff size={24} aria-hidden="true" />
-          <p>
-            This area is available to your account, but hidden by
-            {projection?.activeViewName
-              ? ` the ${projection.activeViewName} view`
-              : " the current view"}.
-          </p>
-          <div className="button-row">
-            {!projection?.locked && runtime && (
-              <Button variant="primary" onClick={() => void exitView()}>
-                Exit view
-              </Button>
-            )}
-            <Button onClick={() => navigate(fallbackPath)}>Back to view</Button>
+    <PageScrollViewport>
+      <div className="content-pad">
+        <Card title="Outside the current view">
+          <div className="empty-state">
+            <EyeOff size={24} aria-hidden="true" />
+            <p>
+              This area is available to your account, but hidden by
+              {projection?.activeViewName
+                ? ` the ${projection.activeViewName} view`
+                : " the current view"}.
+            </p>
+            <div className="button-row">
+              {!projection?.locked && runtime && (
+                <Button variant="primary" onClick={() => void exitView()}>
+                  Exit view
+                </Button>
+              )}
+              <Button onClick={() => navigate(fallbackPath)}>Back to view</Button>
+            </div>
           </div>
-        </div>
-      </Card>
-    </div>
+        </Card>
+      </div>
+    </PageScrollViewport>
   );
 }