Research-Link Card Text Layout and Responsive Readability Repair

Status

Current implementation report for IARPG-OPS-2 2.0.26-wip. The release remains work in progress.

Purpose

Document and verify the repair for the shared research-link component after a first-viewport review showed card labels, titles, descriptions, and arrows collapsing into continuous prose.

Scope

The repair applies to every .research-link-grid and .research-link-card instance, including the homepage research strip, the homepage World Context and alliance entry, Global Atlas navigation, documentation and standards indexes, source collection navigation, generated report-link strips, and Scenario Modeling research links. It does not alter the linked destinations, wording, release truth boundaries, shell hierarchy, /start orientation hero, /factions institutional hero, or any country, alliance, campaign, research, or source record.

Executive Summary

The markup for the shared component already exposed four semantic text parts inside each anchor: a category label, a title, a description, and a directional arrow. No CSS rule defined the container or card layout. Consequently, the grid remained a normal block and every card remained an inline anchor; its inline descendants rendered without visible separation, producing strings such as WORLD CONTEXTWorld Context ExplorerRead….

The 2.0.26 repair introduces one shared responsive component contract. The container is now an auto-fitting grid. Each link is an internal grid with explicit rows for the label, title, and description and a dedicated arrow column. The text elements are block-level, have bounded wrapping, and retain readable hierarchy in light and dark themes. Desktop, tablet, and mobile layouts avoid clipping, overlap, and horizontal overflow. Reduced-motion, forced-colors, keyboard-focus, and print behavior are explicit.

Evidence Reviewed

• The user-supplied 1365-pixel-wide screenshot showing the homepage World Context and alliance links as one continuous text run.
• index.php, including the eight-card .alliance-entry-grid and the shared research-report strip rendered earlier on the same page.
• app/layout.php, especially renderresearchlinks().
• Other component consumers in global.php, docs/index.php, docs/sources.php, docs/standards/index.php, and scenario-modeling.php.
• The final CSS cascade in assets/css/site.css.
• Managed Chromium fixtures at 1365 × 1000 and 390 × 1200 in light and dark themes.
• RESEARCH-LINK-TEXT-LAYOUT-EVIDENCE-IARPG-OPS-2-2.0.26-wip.json and its text companion.

Findings

The component had markup but no layout contract

The source tree used .research-link-grid and .research-link-card across multiple public routes, but assets/css/site.css contained no declaration for either selector. Browser defaults therefore rendered the anchors and their descendants inline. The issue was shared and systemic rather than limited to the homepage copy.

Explicit text hierarchy fixes the concatenation

The repaired card assigns the category label, title, and description to the first grid column and the arrow to a second column spanning all rows. The first three children are explicitly block-level and use overflow-wrap: anywhere, preventing both concatenation and unbounded long-token overflow.

Auto-fitting columns preserve useful density

At the reviewed 1365-pixel viewport, the homepage component uses four columns. At 768 pixels it uses two columns, and at 390 pixels it uses one. The layout preserves the compact publication density without compressing the description into an unreadable line or creating a second persistent interface surface.

The fix applies to both repeated homepage instances

The homepage contains a generated four-report research strip and a separate eight-card alliance and world-system entry. Both now use the same shared component rules, removing the duplicated failure visible above and inside the reviewed section.

Theme and accessibility states remain explicit

The component derives color from the existing theme variables, preserves keyboard focus, disables movement when reduced motion is requested, uses system colors in forced-colors mode, and removes decorative shadowing in print. No JavaScript, network request, new image, or sticky behavior was added.

Decisions or Recommendations

• Keep .research-link-grid and .research-link-card as one shared component instead of adding page-specific fixes.
• Keep the label, title, description, and arrow structurally distinct in both markup and computed layout.
• Preserve the auto-fit grid and one-column narrow-screen fallback.
• Use existing theme and density variables before introducing page-specific colors or spacing.
• Keep .menu-strip as the sole sticky surface.
• Add a focused browser regression whenever a shared component has repeated semantic markup but no explicit CSS contract.
• Treat deterministic layout checks as regression evidence, not proof of human preference or comprehension.

Validation Performed

The focused validator completed 56 of 56 checks. It inspected the homepage, Global Atlas, documentation index, and standards index at desktop and mobile widths. It verified:

• the research-link containers compute to display: grid;
• every research link computes to an internal grid;
• labels, titles, descriptions, and arrows have distinct rendered boxes;
• desktop routes use multiple columns and mobile routes use one column;
• no card clips its text;
• no cards overlap;
• no tested route develops horizontal overflow;
• light and dark themes preserve distinct label, body, border, and surface colors;
• reduced-motion and forced-colors rules exist;
• the fix introduces no new sticky surface or runtime dependency.

Evidence: focused JSON validation and focused text validation.

Risks and Limitations

• Managed Chromium fixture validation does not establish native Firefox rendering, native assistive-technology speech output, or every operating-system font metric.
• A four-column desktop layout is a bounded implementation decision, not evidence that every reader prefers that density.
• Separating formerly inline content into visible mobile cards increases the measured /start document height. The deterministic density ceilings were transparently adjusted from 12,804 to 12,950 CSS pixels on desktop and from 21,260 to 21,800 on mobile; the measured 12,852- and 21,607-pixel fixtures remain contained and introduce no horizontal overflow.
• The repair does not rewrite the underlying link text or evaluate whether each description is the best possible editorial wording.
• Automated checks do not establish human comprehension, cognitive accessibility, production-host behavior, field performance, or live crawler outcomes.

Memory References

• Hot-memory index
• Current context
• Current progress
• Active decisions
• Current architecture
• UI shell contract
• Current test plan

Related Durable Documents

• [Interface Density and Navigation Polish Report](interface-density-and-navigation-polish-report.md#findings)
• [Hero Clarity, Report Integration, and UAI Routing Report](hero-clarity-report-integration-and-uai-routing-report.md#findings)
• [Site Identity and Onboarding Clarity Report](site-identity-and-onboarding-clarity-report.md#findings)

Supersession Status

Current for the shared research-link layout beginning with 2.0.26-wip. It supersedes the implicit browser-default rendering of the same markup but does not supersede the compact-shell, hero, density, accessibility, memory, research-truth, or publication-boundary decisions.