Skip to content

Docs page and tooltip fixes: duplicate title, overlapping buttons, clipped tooltips #483

Description

@tunile943

Background

  • The /docs Resources page sets its browser-tab title to Resources | Resources | Ithaca Community Recovery on the landing page, and a floating table-of-contents button overlaps the "Copy as Markdown" button's dropdown caret.
  • Navigation tooltips misbehave: the "User menu" tooltip overflows the right viewport edge (renders clipped as "…nu"), and the collapsed sidebar rail's tooltips don't match their controls' aria-labels ("Location" vs aria-label="Show location filters") while covering the icon below.
  • New to the codebase? Start with Project Structure. Each component's styles are colocated (Component.module.scss next to Component.tsx). Package manager is yarn, run from frontend/.

Proposal

1. Deduplicate the docs title — frontend/app/(main)/docs/[[...slug]]/page.tsx (~line 20)

title: doc ? `${doc.title} | Resources | Ithaca Community Recovery` : "Resources | Ithaca Community Recovery",

The landing doc's own title is already "Resources", producing the duplicate. Skip the segment when doc.title === "Resources" (or compare against the section name rather than hardcoding, if the generated content in frontend/util/docs/docsContent.generated.ts makes that natural — do NOT hand-edit that generated file).

2. TOC / Copy-as-Markdown overlap — frontend/app/components/docs/DocsArticle.tsx + DocsShell.module.scss

The floating table-of-contents button sits on the "Copy as Markdown" dropdown caret. Reposition (offset one of them, or move the TOC button below the article header) so both are fully clickable. Check both wide and narrow viewport widths.

3. Tooltip fixes — frontend/app/components/navigation/AppNavigation.tsx + module.scss

  • Tooltips near the right viewport edge must flip or clamp so they render fully (the "User menu" one is the repro).
  • Rail tooltips: make the tooltip text match each control's aria-label (one source string for both), and offset the tooltip so it doesn't cover the icon below it.

Acceptance Criteria

  • /docs landing tab title shows "Resources | Ithaca Community Recovery" exactly; article pages show <article> | Resources | …
  • Copy-as-Markdown control fully clickable with the TOC button present, at wide and narrow widths
  • Edge tooltips render fully; each rail tooltip's text equals its control's aria-label
  • yarn test:all green (run from frontend/; make sure nothing else is on port 3000 first — note tests/e2e/19-docs-noindex.spec.ts covers docs metadata, extend it for the title fix)

Type

  • Enhancement — improves or extends an existing feature.

Priority

  • Critical
  • High
  • Medium
  • Low

Area(s) Touched

Product areas

  • docs
  • ui/ux

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood for newcomerspriority: lowNice-to-have, distant goal, or minor typo.scope: docs/docs Resources page — rendering, navigation, searchscope: ui/uxFrontend layout/styling not tied to a specific integrationtype: enhancementImproves or extends an existing feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions