Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 228x 228x 228x 228x | import { Box } from "@mui/material";
import { ReactNode } from "react";
import { useAppTheme } from "@theme/v2/Provider";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
interface DocumentScrollRegionProps {
children: ReactNode;
/** Measured page-banner height; the region fills the viewport below it. */
bannerHeight?: number;
}
// The portal's #page-container hides its scrollbar app-wide, so a legal
// document scrolled through it gives no scroll-position feedback (AGR001).
// On desktop this region owns the scrolling instead: the banner stays put and
// only the document pane below it scrolls, carrying the mockup's slim
// scrollbar (6px, Colour/Text/tertiary thumb, 8px radius — Figma "Scrollbar"
// layer). On mobile the page keeps its native scroll — touch platforms
// overlay their own transient indicator.
export default function DocumentScrollRegion({
children,
bannerHeight = 0,
}: DocumentScrollRegionProps) {
const { palette } = useAppTheme();
const { isMobileView } = useCustomThemeV2();
const thumbColor = palette.text?.tertiary ?? "#80807e";
return (
<Box
data-testid="document-scroll-region"
sx={{
flex: 1,
width: "100%",
minWidth: 0,
transition: "all 0.3s ease",
...(!isMobileView && {
height: `calc(100vh - ${bannerHeight}px)`,
overflowY: "auto",
"&::-webkit-scrollbar": {
width: "6px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: thumbColor,
borderRadius: "8px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: "transparent",
},
scrollbarWidth: "thin",
scrollbarColor: `${thumbColor} transparent`,
}),
}}
>
{children}
</Box>
);
}
|