Repository navigation
ui(free): table readability — alignment, density, scroll and sticky headers on Preview, Results and History #273
Copy link
Copy link
Closed
Labels
enhancementNew feature or requestNew feature or requestuiAdmin interface polish and UX (presentation-only)Admin interface polish and UX (presentation-only)
Description
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-157overrides WP table rhythm:table-layout: fixed,min-width: 900px, cell padding16px. With 7 columns (Preview) this forces a scrollbar at common laptop widths.- Money and numeric columns are left-aligned (only
tabular-numsis 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.csswordpress/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
- Restore WP table rhythm: cell padding 8–12px; drop
table-layout: fixed/min-width: 900pxunless genuinely needed; keep the existing.writeleash-table-scrollwrapper (role="region",tabindex="0", aria-label) for narrow screens only. - Right-align all money/number columns, headers included; keep
font-variant-numeric: tabular-nums. - 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.
- Results table: keep Expected / Now / Planned / Apply / Undo columns; right-align the three price columns; outcome cell = short bold label + secondary line.
- Sticky
theadinside the scroll region (solid background, correct offset) in all three tables. - Tighten
detailsinside 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 (
writeleashtext 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).
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or requestuiAdmin interface polish and UX (presentation-only)Admin interface polish and UX (presentation-only)
Activity
docs(review): refresh #170 proof for UI polish batch #284
fix(tests): selection-http expects merged before-to-after preview cell
Merge pull request #284 from MrDarkRoot/ui/batch-273-278
MrDarkRoot commentedon Oct 15, 2026
Done on main. UI polish landed in #284, screenshots in #286, a11y evidence in #287, chip focus in #289.