Phase 2.6: Content Page Components Migration

package.json

@@ -57,6 +57,7 @@
     "lint:css": "npm run-script lint:css:tsx && npm run-script lint:css:plain",
     "lint:css:tsx": "stylelint 'src/**/*.tsx'",
     "lint:css:plain": "stylelint --config .stylelintrc.css.json 'src/**/*.css'",
+    "lint:css:plain-fix": "stylelint --fix --config .stylelintrc.css.json 'src/**/*.css'",
     "lint:bash": "shellcheck $(find . -type f \\( -iname '*\\.sh' -or -iname '*\\.bash' \\) | grep -v -e .venv -e node_modules)",
     "prestart": "npm run-script build:css",
     "start": "./script/start.bash",

src/app/components/MainContent.tsx

@@ -13,6 +13,7 @@ interface Props {
   book: State['book'];
   className?: string;
   dangerouslySetInnerHTML?: { __html: string; };
+  style?: React.CSSProperties;
   textSize?: TextResizerValue;
 }
 
@@ -44,10 +45,10 @@ const ContentStyles = React.forwardRef<HTMLElement, React.PropsWithChildren<Cont
 );
 
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
-  ({ book, children, className, ...props }, ref) => (
+  ({ book, children, className, style, ...props }, ref) => (
     <Consumer>
       {({ registerMainContent }) => (
-        <main ref={mergeRefs(ref, registerMainContent)} className={className} tabIndex={-1}>
+        <main ref={mergeRefs(ref, registerMainContent)} className={className} style={style} tabIndex={-1}>
           <ContentStyles id={MAIN_CONTENT_ID} book={book} tabIndex={-1} {...props}>
             {children}
           </ContentStyles>