Skip to content

Top performing keywords need to be trimmed more - values are overlapping #13213

Description

@benbowler

Bug Description

Values in the Top performing keywords table overlap and need trimming further.

Also Top Earning pages.

Steps to reproduce

Screenshots

Image Image

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • In the generated PDF report, long primary values in the "Top search queries" (top performing keywords) table and the "Top earning pages" table should be truncated to a single line with an ellipsis so they fit within their cell and never overlap or crowd the adjacent metric columns.
  • The truncation should match the treatment already used by the other PDF metric tables (single line, ellipsis, kept clear of the metric column).

Implementation Brief

  • Truncate the query cell in DashboardPopularKeywordsWidgetPDF.tsx

    • The query PDFLink isn't width-bounded (queryCell is only flexDirection: 'row')
    • Wrap the query in a bounded box (flex: 1 with a right gutter) and apply maxLines={ 1 } + textOverflow: 'ellipsis' to the query text
  • Truncate the title cell in indexPDF.tsx (Top earning pages)

    • The title is already bounded by titleGroup (flex: 1)
    • Add maxLines={ 1 } + textOverflow: 'ellipsis' to the title text so it truncates to one line instead of wrapping to many
  • Prefer applying the fix once in the shared table

    • Since PDFTable truncates nothing today, add the truncation in its cell path (a bounded cell box plus maxLines/textOverflow for text) and/or provide a shared truncating-cell helper the custom cell renderers use
    • Future PDF tables inherit it rather than re-implementing per widget
    • Guidance: Follow the documented react-pdf caveat in PDFMetricTileTable (its primaryCell comment): react-pdf reserves less room for the ellipsis than CSS, so use a wider right gutter (it uses marginRight: 20) to keep truncated text clear of the metric column

Test Coverage

  • No updates needed

QA Brief

  • Connect Search Console and AdSense so both hold report data, then generate a PDF report with every section ticked.
  • Read the Top performing keywords and Top earning pages tiles in Key metrics. Confirm a label too long for its tile ends in , with clear space before the number beside it.
  • Read the longest row of the Top search queries for your site and Top earning pages tables. Confirm each holds one line, ends in , and leaves a gap before the Clicks and Earnings columns.
  • Read a short keyword and a short page title in those same four places. Confirm each keeps every character and shows no .

Changelog entry

  • Fix issues with long titles in "Top performing keyboards" section in PDF reports.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P0High priorityTeam SIssues for Squad 1Type: BugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    Sponsor
    SponsoredKunjungi sekarang
    Promo