Skip to content

Login page heading shows "Open Data Capture" on narrow screens when the instance name is not set in the reader's language #1704

Closed

Description

@joshunrau

On a narrow screen, the login page's instance-name heading shows "Open Data Capture" whenever the instance name was not entered in the reader's language, even when it exists in another one. The route reads branding.instanceName[resolvedLanguage] directly. The branding panel that replaces the heading at lg and wider resolves the same field with getValueForLanguage, which falls back through the other languages. So an instance named only in French ("Clinique Douglas") shows "Clinique Douglas" to an English reader on a desktop, but "Open Data Capture" to the same reader on a phone or tablet. getValueForLanguage exists precisely for this case: its doc comment says an instance named in one language "should still show that name to a reader of" another.

Where

apps/web/src/routes/auth/login.tsx:41-42:

// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const instanceName = branding?.instanceName?.[resolvedLanguage]?.trim() || 'Open Data Capture';

rendered at :130-132 (lg:hidden), whereas apps/web/src/components/LoginBranding/LoginBrandingPanel.tsx:231 uses:

const instanceName = getValueForLanguage(branding?.instanceName ?? {}, lang)?.trim() ?? DEFAULT_INSTANCE_NAME;

Reproduce

  1. As an admin, enable login branding and set the instance name in French only ("Clinique Douglas"). Leave English and Spanish blank.
  2. Sign out, set the interface language to English, and open /auth/login in a window narrower than 1024 px.

Actual: the heading above the login card reads "Open Data Capture". Widen the window and the branding panel reads "Clinique Douglas".
Expected: the heading reads "Clinique Douglas" at every width, as the branding panel does.

Tests

  • apps/web/src/routes/auth/__tests__/login.test.tsx: it('should fall back to the instance name in another language, so the heading matches the branding panel').
  • e2e, testing/src/specs/admin-branding.spec.ts: set a French-only instance name, then at a mobile viewport in English assert the login heading shows it.

Suggested fix

Use getValueForLanguage(branding?.instanceName ?? {}, resolvedLanguage)?.trim() ?? 'Open Data Capture', and drop the prefer-nullish-coalescing disable. getValueForLanguage already treats blank strings as absent.

Activity

  1. added
    BugType: existing behavior is wrong
    Priority: LowNice to have, cosmetic or speculative
    Difficulty: LowIsolated change, about 2 hours or less
    Area: Webapps/web (clinician-facing React SPA)
    Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributor
    on Oct 7, 2026
  2. added a commit that references this issue on Oct 29, 2026
    e5ff0ca
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Area: Webapps/web (clinician-facing React SPA)BugType: existing behavior is wrongDifficulty: LowIsolated change, about 2 hours or lessGood First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorPriority: LowNice to have, cosmetic or speculative

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions