admin
34c8e2db4e
- Added PageScaffold component for shared page layout with safe-area padding and scroll management. - Introduced ResponsiveMobileShell for mobile canvas layout with customizable backgrounds. - Created ScrollablePage component for scrollable content areas. - Updated CSS styles for coins rules screen, sidebar components, and subscription sections to use responsive design tokens. - Added viewport CSS variables provider to synchronize CSS variables with the visual viewport. - Refactored breakpoints and dimensions for better responsiveness across devices.
34 lines
887 B
TypeScript
34 lines
887 B
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
import styles from "./responsive-mobile-shell.module.css";
|
|
|
|
export interface ResponsiveMobileShellProps {
|
|
children: ReactNode;
|
|
/** Background used inside the mobile canvas. */
|
|
background?: string;
|
|
/** Background used outside the mobile canvas on wider screens. */
|
|
outerBackground?: string;
|
|
/** Class applied to the mobile canvas. */
|
|
className?: string;
|
|
}
|
|
|
|
export function ResponsiveMobileShell({
|
|
children,
|
|
background,
|
|
outerBackground,
|
|
className,
|
|
}: ResponsiveMobileShellProps) {
|
|
const style = {
|
|
"--mobile-shell-background": background,
|
|
"--mobile-shell-outer-background": outerBackground,
|
|
} as CSSProperties;
|
|
|
|
return (
|
|
<div className={styles.shell} style={style}>
|
|
<div className={[styles.content, className].filter(Boolean).join(" ")}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|