OpenConceptLab/ocl_issues#2844 | TBv2's footer links the Terms of Use and Privacy Policy

[paynejd]

Part of OpenConceptLab/ocl_issues#2844. Using TBv2 means accepting OCL's Terms of Use, but TBv2 didn't link it or the Privacy Policy anywhere. The footer now does, on every page, signed in or not. The SSO sign-up screen is a separate PR: OpenConceptLab/oclsso#2.

What changed

• The footer starts with Terms of Use (https://openconceptlab.org/terms-of-use) and Privacy Policy (https://openconceptlab.org/privacy-policy). Each opens in a new tab (target="_blank", rel="noopener noreferrer").

• The URLs are TERMS_OF_USE_URL and PRIVACY_POLICY_URL in src/common/constants.js.

• The labels are common.terms_of_use and common.privacy_policy in en, es and zh, TBv2's three locales. The keys and strings are the same as in TBv3 (TBv3: link the Terms of Use and Privacy Policy from the footer ocl_issues#2899) and the Mapper (Mapper: link the Terms of Use and Privacy Policy from the footer ocl_issues#2900):

  Key	en	es	zh
  common.terms_of_use	Terms of Use	Términos de uso	使用条款
  common.privacy_policy	Privacy Policy	Política de privacidad	隐私政策

• The link markup and the hover/focus fix match TBv3's footer. The links also get back a visible keyboard focus ring, which App.scss removes from every link, as the announcement banner's links do.

Narrow screens

The footer row is right-aligned, and the left menu sits over its left end: 65 px closed, 250 px open. With the links added, the row is 640 px in English and 711 px in Spanish. Below 1100 px it would slide under the menu, and at 375 px the links would start off-screen.

• From 1100 px up, the footer is one row, as before. That's where the Spanish row clears the open menu with about 100 px to spare.
• Below 1100 px, the links take a row of their own and the copyright and versions wrap under them. They stay right-aligned, with left padding that clears the closed menu, and spacing replaces the dividers.
• The taller footer would cover the end of the page, because .content reserves only 50 px for it. So the footer publishes how much taller than 50 px it is as --footer-extra-height, and .content's bottom margin adds it. It uses a ResizeObserver, as AnnouncementBanner does for --announcement-height. From 1100 px up the value is 0, so nothing changes there.

TBv3 and the Mapper switch at 900 px. TBv2 needs a wider breakpoint because of its permanent left menu.

How I tested it

CI gate. npm ci, then ./node_modules/eslint/bin/eslint.js --ext .jsx,.js src/, both in a node:14 container (the Node version pr.yml uses). Both pass.

Browser check. I ran the dev server in a node:14 container against the staging API, signed out. Headless Chromium checked en, es and zh, at 1280, 1100, 1099, 768, 600, 414 and 375 px, with the left menu closed, and at 1100, 1099 and 900 px with it open. On each it asserted that:

• both links have the right URL, target="_blank" and rel="noopener noreferrer", and the translated label;
• every footer item sits to the right of the left menu (at least 42 px clear) and inside the viewport;
• --footer-extra-height equals the footer's height minus 50 px (0, 14, 36 or 68 px), the footer ends at the bottom of the page, and the page's content ends above it.

The labels in es and zh were checked with a local, uncommitted override of lng in src/i18n/config.js. TBv2's language menu shows only when signed in, and it lists only en and es. I also used a production-length build string (2.1.159-<sha>), so the measured widths match production.

How to review it locally

gh pr checkout 'OpenConceptLab/ocl_issues#2844-footer-legal-links' --repo OpenConceptLab/oclweb2
docker run --rm -v "$PWD":/app -w /app node:14 npm ci
docker run --rm -p 4000:4000 -v "$PWD":/app -w /app -e WEB_PORT=4000 -e NODE_ENV=development \
  -e API_URL=https://api.staging.openconceptlab.org node:14 npm start

Then open http://localhost:4000/ and check:

• The footer at the bottom right reads Terms of Use | Privacy Policy | © 2026 Open Concept Lab | Web … | API ….
• Each link opens the right openconceptlab.org page in a new tab.
• Narrower than 1100 px (devtools device mode), the links sit on a row of their own above the rest, nothing hides under the left menu, and the page's last line isn't covered.
• To see Spanish, sign in and switch the language from the header.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UML1sP39mf4a2ynq22C9RD

[paynejd]

Codex review, pass 1 (codex-cli 0.162.1, commit d094636)

Verdict: clean. No findings.

findings.json

{
  "reviewer": "codex-cli 0.162.1",
  "perspective": "defects",
  "mode": "full",
  "commit": "d094636a",
  "verdict": "clean",
  "prior": [],
  "findings": []
}

[paynejd]

Simplification review (fresh Claude subagent, commit d094636)

Verdict: one proposed cut.

• S1 (native, Footer.jsx): drop the explicit update() before observer.observe(el), because ResizeObserver sends an initial notification. Declined. AnnouncementBanner.jsx in this repo makes the same explicit call, and so do the TBv3 and Mapper footers. It also sets --footer-extra-height in the layout effect itself rather than waiting for a rendering update. Nothing else changed, so no further Codex pass was needed.

simplify.json

{
  "reviewer": "claude subagent",
  "perspective": "simplify",
  "mode": "full",
  "commit": "d094636a",
  "verdict": "findings",
  "prior": [],
  "findings": [
    {
      "id": "S1",
      "severity": null,
      "tag": "native",
      "file": "src/components/app/Footer.jsx",
      "line": 37,
      "claim": "The explicit `update();` before `new ResizeObserver(update)` is redundant. ResizeObserver sends an initial notification when observation starts on a rendered element whose size is not 0x0, and the footer always has a size. That callback runs during the rendering update, after layout and before paint, so --footer-extra-height is still set before the first frame is painted.",
      "scenario": null,
      "action": "Nothing replaces it: observer.observe(el) triggers the first update(). The same line is in the sibling OpenConceptLab/oclweb3#64 Footer.jsx, so drop it from both PRs or neither to keep them matching.",
      "lines_delta": -1,
      "confidence": "medium"
    }
  ]
}