Skip to content

ui(free): table readability — alignment, density, scroll and sticky headers on Preview, Results and History #273

Closed

Description

@MrDarkRoot

Part of a presentation-only UI/UX polish set for the WriteLeash Free admin screens. Shared constraints and the merge gate are at the bottom of this issue — read them before starting.

Problem

The Preview, Results and History tables are hard to scan and push the layout into horizontal scroll:

  • wordpress/writeleash/includes/free/free-selection.css:131-157 overrides WP table rhythm: table-layout: fixed, min-width: 900px, cell padding 16px. With 7 columns (Preview) this forces a scrollbar at common laptop widths.
  • Money and numeric columns are left-aligned (only tabular-nums is set), so values do not line up for comparison.
  • Reference screenshots: wordpress/assets/screenshot-2.png (Preview, 7 columns), screenshot-4.png (Results, 6 columns), screenshot-6.png (History).

Scope

  • wordpress/writeleash/includes/free/free-selection.css
  • wordpress/writeleash/includes/free/class-free-admin.php (table renderers only: preview table ~L2315, results table ~L2659, history table ~L1757; pager markup if it needs to match)

Required direction

  1. Restore WP table rhythm: cell padding 8–12px; drop table-layout: fixed / min-width: 900px unless genuinely needed; keep the existing .writeleash-table-scroll wrapper (role="region", tabindex="0", aria-label) for narrow screens only.
  2. Right-align all money/number columns, headers included; keep font-variant-numeric: tabular-nums.
  3. Reduce Preview columns: merge "before → after" into a single before/after cell, fold "Change %" into the Delta cell as a small secondary line. Goal: no page-level horizontal scroll at 1280px.
  4. Results table: keep Expected / Now / Planned / Apply / Undo columns; right-align the three price columns; outcome cell = short bold label + secondary line.
  5. Sticky thead inside the scroll region (solid background, correct offset) in all three tables.
  6. Tighten details inside cells so collapsed rows stay short (row height must not be inflated by hidden content).

Acceptance criteria

  • No page-level horizontal scroll at 1280×800 and 1024×768; at 782px scrolling is contained in the labelled region only.
  • Money/number columns right-aligned and consistent across Preview, Results, History.
  • Sticky headers while scrolling long tables.
  • Existing states (empty row, conflict highlight, pager) still render; keyboard access into the scroll region works.
  • PR includes before/after screenshots at 1440 / 1024 / 782 / 375 px.

Shared constraints (all UI-polish issues)

  • Presentation only: do not change planner math, frozen decimal/display contracts, storage, handlers, nonces, form field names, routes, capabilities or job logic.
  • Native WordPress UI only: .wrap, .button, .widefat, .notice, Dashicons. No React, no CSS framework, no gradients/hero/decorative art, no new icon fonts.
  • All CSS stays scoped under .writeleash-admin; do not touch global wp-admin styles or other screens.
  • WordPress admin palette only; meaning is never conveyed by color alone; visible focus 2px #2271b1; body-text contrast ≥ 4.5:1.
  • Works at 1440 / 1024 / 782 / 375 px and at 200% zoom.
  • User-facing strings stay translatable (writeleash text domain); if strings change, note it in the PR.
  • Follow the Woo extension UX guidelines: no branding, no banners, no new navigation.

Merge gate (required)

Single-owner repository. The implementing agent MUST open a pull request and MUST NOT merge it: no self-merge, no auto-merge, no direct push to main, no force-push after review starts. Only @MrDarkRoot reviews and merges. PR_FAST and CI_COVERAGE must be green, and these files carry the admin + acceptance ownership gates (.github/ci/path-ownership.json).

Activity

  1. added
    enhancementNew feature or request
    uiAdmin interface polish and UX (presentation-only)
    on Oct 13, 2026
  2. MrDarkRoot commented on Oct 15, 2026

    @MrDarkRoot
    OwnerAuthor

    Done on main. UI polish landed in #284, screenshots in #286, a11y evidence in #287, chip focus in #289.

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

    enhancementNew feature or requestuiAdmin interface polish and UX (presentation-only)

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions