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,6 +34,7 @@ export default function ViewSurfaceRouteBoundary({
   }
 
   return (
+    <PageScrollViewport>
       <div className="content-pad">
         <Card title="Outside the current view">
           <div className="empty-state">
@@ -54,5 +56,6 @@ export default function ViewSurfaceRouteBoundary({
           </div>
         </Card>
       </div>
+    </PageScrollViewport>
   );
 }

webui/src/features/PlaceholderPage.tsx

@@ -1,7 +1,9 @@
 import Card from "../components/Card";
+import PageScrollViewport from "../components/PageScrollViewport";
 
 export default function PlaceholderPage({ title }: {title: string;}) {
   return (
+    <PageScrollViewport>
       <div className="content-pad">
         <div className="page-heading">
           <h1>{title}</h1>
@@ -10,6 +12,7 @@ export default function PlaceholderPage({ title }: {title: string;}) {
         <Card>
           <p className="muted">i18n:govoplan-core.next_passes_will_add_functionality_here.c13caade</p>
         </Card>
-    </div>);
+      </div>
+    </PageScrollViewport>);
 
 }

webui/src/features/dashboard/DashboardPage.tsx

@@ -1,5 +1,6 @@
 import Card from "../../components/Card";
 import MetricCard from "../../components/MetricCard";
+import PageScrollViewport from "../../components/PageScrollViewport";
 import PageTitle from "../../components/PageTitle";
 import { usePlatformModules } from "../../platform/ModuleContext";
 
@@ -7,7 +8,8 @@ export default function DashboardPage() {
   const modules = usePlatformModules();
 
   return (
-    <div className="content-pad workspace-data-page core-dashboard-page">
+    <PageScrollViewport className="core-dashboard-page">
+      <div className="content-pad workspace-data-page">
       <div className="page-heading split workspace-heading">
         <div>
           <PageTitle>i18n:govoplan-core.dashboard.d87f47b4</PageTitle>
@@ -37,7 +39,8 @@ export default function DashboardPage() {
           <p className="muted">This minimal core home is only shown while no dashboard WebUI module is available. Feature modules own their pages and can expose dashboard widgets once the dashboard module is installed.</p>
         </Card>
       </div>
-    </div>);
+      </div>
+    </PageScrollViewport>);
 
 }
 

webui/src/index.ts

@@ -95,6 +95,8 @@ export { default as MetricCard } from "./components/MetricCard";
 export { default as MessageDisplayPanel } from "./components/MessageDisplayPanel";
 export type { MessageDisplayAttachment, MessageDisplayField } from "./components/MessageDisplayPanel";
 export { default as PageTitle } from "./components/PageTitle";
+export { default as PageScrollViewport } from "./components/PageScrollViewport";
+export type { PageScrollViewportProps } from "./components/PageScrollViewport";
 export { default as PasswordField } from "./components/PasswordField";
 export { default as PeoplePicker } from "./components/people/PeoplePicker";
 export type { PeoplePickerProps } from "./components/people/PeoplePicker";

webui/src/styles/layout.css

@@ -68,8 +68,10 @@
 .section-link.active { border-left: 3px solid var(--accent); font-weight: 700; }
 .section-link.subtle { font-size: 13px; }
 .workspace-content { min-width: 0; max-width: 100%; min-height: 0; overflow: auto; }
+.page-scroll-viewport { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; }
 .ui-no-sticky-section-sidebars .app-content { overflow: auto; }
 .ui-no-sticky-section-sidebars .workspace { height: auto; min-height: 100%; }
+.ui-no-sticky-section-sidebars .page-scroll-viewport { height: auto; min-height: 100%; overflow: visible; }
 .ui-no-sticky-section-sidebars .section-sidebar {
   height: max-content;
   max-height: none;
@@ -83,7 +85,6 @@
 .page-heading.split { display: flex; align-items: center; justify-content: space-between; }
 .module-entry-page { max-width: none; }
 .workspace-data-page .card { margin-bottom: 18px; }
-.core-dashboard-page { height: 100%; overflow: auto; }
 .page-heading.workspace-heading {
   position: sticky;
   top: 0;