Dark mode tweaks: error pages text contrast, dropdown borders, table corners

[nulmete]

Related issue: N/A — ad-hoc dark-mode polish (revives fixes from the closed #43675)

Summary

• Error pages (403/404/500): replaced hardcoded #333 body text with $core-fleet-black so the copy adapts to dark mode.
• Dropdown menu border: added border to ActionsDropdown ONLY in dark mode (light mode already has a box-shadow which in dark mode is basically not visible so it's hard to distinguish what's in front and what's behind when opening a dropdown).
• Table bottom-right corner: tables such as UsersTable have the Actions dropdown in the last cell, and I think this made the bottom-right corner to be cut because of a missing border-radius on the inner cell that matches the table's border radius.

Checklist for submitter

• Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
  See Changes files for more information.

Testing

• QA'd all new/changed functionality manually

#	Before	After
Not found page
Access denied page
ActionsDropdown border + Table bottom corners (*)

(*) Note that in the Users table, which has the Actions dropdown, the right bottom corner is cut because the inner element doesn't respect the table's border radius. Fixed this by adding the same border-radius to that cell.

Summary by CodeRabbit

• Bug Fixes

  • Fixed a display issue where data table bottom-right corners were being cut off, ensuring complete visibility of table content.
  • Improved dark mode contrast and readability on error pages (403, 404, and 500 errors).

• New Features

  • Added visual borders to dropdown menus for improved clarity and user interaction feedback.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.67%. Comparing base (5f05ffe) to head (739a213).
⚠️ Report is 107 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #44771      +/-   ##
==========================================
- Coverage   66.69%   66.67%   -0.02%     
==========================================
  Files        2651     2658       +7     
  Lines      213440   213801     +361     
  Branches     9638     9759     +121     
==========================================
+ Hits       142344   142555     +211     
- Misses      58135    58283     +148     
- Partials    12961    12963       +2     

Flag	Coverage Δ
frontend	54.24% <ø> (+0.05%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2abbf052-4a37-43ad-9294-53c86ca4a7ab

📥 Commits

Reviewing files that changed from the base of the PR and between e102904 and 739a213.

📒 Files selected for processing (7)

• changes/dark-mode-tweaks
• frontend/components/ActionsDropdown/ActionsDropdown.tsx
• frontend/components/TableContainer/DataTable/_styles.scss
• frontend/pages/errors/Fleet403/_styles.scss
• frontend/pages/errors/Fleet404/_styles.scss
• frontend/pages/errors/Fleet500/_styles.scss
• frontend/styles/var/colors.scss

---

Walkthrough

This PR implements dark mode UI refinements across multiple frontend components and pages. Changes include replacing hard-coded hex color values with design-system SCSS variables in error page styles (Fleet403, Fleet404, Fleet500), updating dropdown menu styling with an outline via a CSS variable in ActionsDropdown, fixing border-radius behavior for data table bottom rows and cells, and adjusting the actions cell layout in data tables from flex-based to text-align-based alignment with an inline-flex wrapper for the dropdown.

Possibly related PRs

• fleetdm/fleet#44620: Overlaps on DataTable bottom-row corner rounding and dropdown styling updates with CSS variable changes.
• fleetdm/fleet#43422: Applies dark-mode UI styling tweaks to the same frontend files including DataTable styles, dropdown styling, and colors.scss modifications.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR partially addresses the linked issue #43675. Error page contrast and dropdown borders are implemented; logo, selection, input contrast, and box-shadow objectives were reverted or not included.	Clarify whether the omitted objectives from #43675 (logo, selection, input contrast, box-shadow removal) are deferred, out-of-scope, or intentionally abandoned for this PR.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately and clearly summarizes the main UI tweaks: error page text contrast, dropdown borders, and table corners.
Description check	✅ Passed	The PR description includes a clear summary of changes, implementation details, a completed checklist with changes file added, and manual QA with before/after screenshots.
Out of Scope Changes check	✅ Passed	All changes (error pages, dropdown menu border, table corners, color variable updates) are directly aligned with the stated PR objectives of dark-mode polish.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch nulmete/dark-mode-tweaks

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR polishes Fleet’s dark mode UI by improving visual contrast on error pages, adding a dark-mode-only outline to the ActionsDropdown menu to improve separation from background surfaces, and fixing data table bottom corner rounding when the last row is hovered (notably when an Actions dropdown exists in the final cell).

Changes:

• Replaced hardcoded #333 paragraph text on 403/404/500 pages with themed $core-fleet-black so it adapts to dark mode.
• Introduced a themed CSS custom property (--dropdown-menu-outline) and used it to add a subtle dark-mode-only outline to the Actions dropdown menu via box-shadow.
• Adjusted DataTable styling to preserve bottom corner rounding on the last row and updated .actions__cell alignment to avoid breaking table-cell border-radius rendering.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/styles/var/colors.scss	Adds --dropdown-menu-outline custom property with a dark-mode override.
frontend/pages/errors/Fleet403/_styles.scss	Switches paragraph text color to themed $core-fleet-black.
frontend/pages/errors/Fleet404/_styles.scss	Switches paragraph text color to themed $core-fleet-black.
frontend/pages/errors/Fleet500/_styles.scss	Switches paragraph text color to themed $core-fleet-black.
frontend/components/TableContainer/DataTable/_styles.scss	Adds bottom-cell border radii for the last row and updates actions-cell alignment to keep table-cell rendering intact.
frontend/components/ActionsDropdown/ActionsDropdown.tsx	Adds an outline “ring” to the dropdown menu using the new CSS variable (effective in dark mode).
changes/dark-mode-tweaks	Adds release-note bullets describing the UI changes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[RachelElysia]

😍

[Brajim20]