Skip to content

fix(views): render the dashboard without inline style attributes - #12

Merged
cmer merged 2 commits into
mainfrom
feat/render-new-screenshots
Sep 4, 2026
Merged

fix(views): render the dashboard without inline style attributes#12
cmer merged 2 commits into
mainfrom
feat/render-new-screenshots

Conversation

@cmer

@cmer cmer commented Sep 4, 2026

Copy link
Copy Markdown
Owner

Summary

  • Remove the last nine inline style attributes from the dashboard views. A nonce cannot rescue a style attribute — those are governed by style-src-attr, which falls back to style-src — so under a strict style-src 'self' the table column widths collapsed and the queue depth bars disappeared. This is the other half of the CSP work started in Emit csp-nonce meta tag so Turbo-injected styles/scripts work under a strict CSP #5.
  • Move the fixed column widths and the failed-jobs error cell into role-named rules alongside the other table.fd-data rules in assets-src/input.css (fd-col-select, fd-col-actions, -md, -lg, args.fd-error-cell), and drop the font-size:12px on the processes hostname cell that table.fd-data .dim already sets.
  • Render the queue depth bar as a server-rendered SVG, mirroring metrics/_sparkline.html.erb: width on a <rect> is a geometry attribute, so CSP never inspects it. Rounded ends come from border-radius on the SVG root rather than rx, which preserveAspectRatio="none" would stretch. The fd-depth-bar class name is kept so the existing assertion in overview_test.rb still counts real bars.
  • Add test/integration/csp_inline_styles_test.rb, which crawls the overview, queues, processes, recurring tasks, /flightdeck/jobs for every JobsQuery::STATES entry, and both a failed and a non-failed job detail page, failing on any rendered style attribute. A second test asserts the overview renders a depth bar with a non-zero width so the first cannot pass vacuously.
  • Rebuild the assets (flightdeck-ad6cd9e6c4b8.cssflightdeck-38ba36531cee.css plus manifest.json), add a CHANGELOG.md line under [Unreleased], and regenerate docs/screenshots. Most of the PNG diff is re-seeded data and relative timestamps rather than the style change.

Testing

  • bin/test — 283 runs, 0 failures in both the full-host and API-only modes; assets fresh
  • bundle exec rake test:system — 13 runs, 48 assertions, 0 failures
  • bundle exec rubocop — 91 files inspected, no offenses
  • bundle exec rake assets:check — assets are fresh (13 entries)
  • bundle exec rake screenshots — all six PNGs regenerated
  • Manual check via bin/demo: overview depth bars and every table's column widths, light and dark themes, at 1440px and ~1000px
  • Verified the new test is not vacuous by reverting one fix and confirming it fails naming /flightdeck/recurring_tasks

cmer and others added 2 commits September 4, 2026 13:11
A nonce cannot rescue an inline `style` attribute: those are governed by
style-src-attr, which falls back to style-src, so under a strict
`style-src 'self'` the table column widths collapsed and the queue depth
bars disappeared.

Column widths and the failed-jobs error cell move into role-named rules in
input.css next to the other `table.fd-data` rules; the processes hostname
cell drops a `font-size:12px` that `.dim` already set. The depth bar — the
one dynamic width — becomes a server-rendered SVG like the adjacent
sparkline, where `width` on a `<rect>` is a geometry attribute CSP never
inspects.

`test/integration/csp_inline_styles_test.rb` crawls every dashboard page,
every jobs state, and both job detail paths, and fails on any rendered
`style` attribute.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Captured with `rake screenshots` after the inline-style removal. The depth
bars now come from the SVG partial; the rest of the diff is the seed data
and relative timestamps re-rendering.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@cmer
cmer merged commit 594ec5d into main Sep 4, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant