Finished mobile view debugging (except orange ticket issues)

website/src/components/wordpress.tsx

@@ -106,6 +106,44 @@ const parseOptions: HTMLReactParserOptions = {
             {domToReact(node.children, parseOptions)}
           </Button>
         )
+      } else if (node.name === "img") {
+        const props = attributesToProps(node.attribs)
+        return (
+          <img
+            {...props}
+            title="Click to view full size"
+            className={css.wordpressImage}
+            onClick={(e) => {
+              // Open image in new tab for full view
+              window.open(e.currentTarget.src, "_blank")
+            }}
+          />
+        )
+      } else if (node.name === "video") {
+        const props = attributesToProps(node.attribs)
+        return (
+          <video {...props} className={css.wordpressVideo} controls>
+            {domToReact(node.children, parseOptions)}
+          </video>
+        )
+      } else if (
+        node.name === "div" &&
+        node.attribs["class"]?.includes("video")
+      ) {
+        const props = attributesToProps(node.attribs)
+        return (
+          <div
+            {...props}
+            style={{
+              position: "relative",
+              width: "100%",
+              maxWidth: "100%",
+              overflow: "hidden",
+            }}
+          >
+            {domToReact(node.children, parseOptions)}
+          </div>
+        )
       } else if (
         node.name === "div" &&
         node.attribs["class"]?.includes("wpTabs")

website/src/pages/cwkw/cwkw-layout.css.ts

@@ -47,6 +47,9 @@ export const contentContainer = style([
 ])
 
 export const leftMargin = style({
+  width: "100%",
+  maxWidth: "100%",
+  marginLeft: 0, // No margin on mobile.
   "@media": {
     [mediaQueries.medium]: {
       marginLeft: drawerWidth,

website/src/pages/documents/document.css.ts

@@ -327,3 +327,17 @@ export const noScrollTop = style({
   visibility: "hidden",
   opacity: 0,
 })
+
+export const wordpressImage = style({
+  maxWidth: "100%",
+  height: "auto",
+  imageRendering: "-webkit-optimize-contrast",
+  cursor: "pointer",
+  width: "auto",
+})
+
+export const wordpressVideo = style({
+  maxWidth: "100%",
+  height: "auto",
+  width: "100%",
+})

website/src/pages/edited-collections/chapter.css.ts

@@ -1,4 +1,4 @@
-import { style } from "@vanilla-extract/css"
+import { globalStyle, style } from "@vanilla-extract/css"
 import { hspace, mediaQueries } from "src/style/constants"
 import { paddingX, paddingY } from "src/style/utils"
 import { std } from "src/style/utils.css"
@@ -13,3 +13,93 @@ export const docHeader = style([
     },
   },
 ])
+
+export const wordpressContentFix = style({
+  width: "100%",
+  maxWidth: "100%",
+  overflow: "hidden",
+  overflowX: "auto",
+  WebkitOverflowScrolling: "touch",
+})
+
+// Use globalStyle for child element targeting:
+globalStyle(
+  `${wordpressContentFix} h1, ${wordpressContentFix} h2, ${wordpressContentFix} h3, ${wordpressContentFix} h4, ${wordpressContentFix} h5, ${wordpressContentFix} h6`,
+  {
+    clear: "both",
+    width: "100%",
+    float: "none",
+    display: "block",
+    marginBottom: "1rem",
+  }
+)
+
+globalStyle(`${wordpressContentFix} p, ${wordpressContentFix} div`, {
+  clear: "both",
+  width: "100%",
+  float: "none",
+  maxWidth: "100%",
+  paddingLeft: "min(var(--padding-left, 0px), 2rem) !important",
+  paddingRight: "min(var(--padding-right, 0px), 2rem) !important",
+})
+
+globalStyle(`${wordpressContentFix} img`, {
+  maxWidth: "100%",
+  height: "auto",
+  float: "none",
+  display: "block",
+  margin: "0 auto 1rem auto",
+})
+
+globalStyle(`${wordpressContentFix} table`, {
+  width: "100%",
+  maxWidth: "100%",
+  tableLayout: "auto",
+  wordWrap: "break-word",
+  fontSize: "0.8rem",
+})
+
+globalStyle(
+  `${wordpressContentFix} table td, ${wordpressContentFix} table th`,
+  {
+    padding: "0.4rem 0.2rem",
+    overflow: "hidden",
+    verticalAlign: "top",
+    width: "auto",
+    minWidth: "0px",
+    maxWidth: "calc(50vw - 2rem)",
+  }
+)
+
+globalStyle(`${wordpressContentFix} table th`, {
+  fontWeight: "bold",
+})
+
+globalStyle(`${wordpressContentFix} table td`, {
+  lineHeight: "1.2",
+})
+
+globalStyle(`${wordpressContentFix} table td img`, {
+  width: "auto !important", // Override inline width="300"
+  height: "auto !important", // Override inline height="300"
+  minWidth: "calc(25vw) !important",
+  display: "inline-block !important",
+  verticalAlign: "top !important",
+})
+
+// Specific rules for tables with many columns (eg. 5 or more) making them scrollable
+// Compromise between readability and usability
+globalStyle(`${wordpressContentFix} table:has(tr td:nth-child(5))`, {
+  minWidth: "max-content", // Wide tables can go as wide as needed
+  whiteSpace: "nowrap",
+})
+
+globalStyle(`${wordpressContentFix} pre`, {
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  overflowX: "auto",
+  maxWidth: "100%",
+  margin: "0 0 1rem 0",
+  padding: "0.5rem",
+  fontSize: "0.85rem",
+})

website/src/pages/edited-collections/chapter.page.tsx

@@ -1,8 +1,10 @@
 import React from "react"
 import { Helmet } from "react-helmet"
 import { Breadcrumbs, Link, WordpressPage } from "src/components"
+import { useMediaQuery } from "src/custom-hooks"
 import * as Dailp from "src/graphql/dailp"
 import { chapterRoute, collectionRoute } from "src/routes"
+import { mediaQueries } from "src/style/constants"
 import * as util from "src/style/utils.css"
 import CWKWLayout from "../cwkw/cwkw-layout"
 import * as css from "../cwkw/cwkw-layout.css"
@@ -21,6 +23,8 @@ const ChapterPage = (props: {
     },
   })
 
+  const isDesktop = useMediaQuery(mediaQueries.medium)
+
   const dialog = useDialog()
 
   const subchapters = useSubchapters(props.chapterSlug)
@@ -64,7 +68,13 @@ const ChapterPage = (props: {
                     )}
                 </Breadcrumbs>
               </header>
-              <WordpressPage slug={`/${chapter.slug.replace(/_/g, "-")}`} />
+              {isDesktop ? (
+                <WordpressPage slug={`/${chapter.slug.replace(/_/g, "-")}`} />
+              ) : (
+                <div className={chapterStyle.wordpressContentFix}>
+                  <WordpressPage slug={`/${chapter.slug.replace(/_/g, "-")}`} />
+                </div>
+              )}
             </>
           ) : null}