Make 404 page useful

[chrismin13]

Summary by CodeRabbit

• New Features

  • Redesigned 404 page not found experience with clear messaging, navigation links to key app sections, and responsive design for all devices.

• Bug Fixes

  • Fixed error handling for browser requests to non-existent pages to display a dedicated, user-friendly error page instead of generic error details.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

Warning

Review limit reached

@chrismin13, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 23 minutes and 14 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 11fce01c-07cf-4179-bf4d-afc00e8a3dba

📥 Commits

Reviewing files that changed from the base of the PR and between 192748a and 5085995.

📒 Files selected for processing (1)

• static/css/styles.css

📝 Walkthrough

Walkthrough

The Flask 404 error handler in create_app() is fixed to render a new templates/404.html Jinja template (with requested_path context) instead of returning the raw error for non-API requests. CSS styles for the 404 page layout are added, and two tests verify the browser HTML and API JSON 404 responses.

Changes

Custom 404 Page

Layer / File(s)	Summary
404 error handler, template, and styles simple_safer_server/app_factory.py, templates/404.html, static/css/styles.css	The non-API 404 handler now calls render_template("404.html", requested_path=request.path) with an explicit 404 status. The new template extends base.html, displays the 404 code, navigation action links, and the requested path. CSS defines panel layout, mono typography with clamp() sizing, action grid, breadcrumb row, and a max-width: 640px single-column breakpoint.
Route tests for browser and API 404 tests/test_app_factory_routes.py	test_browser_404_renders_bunker_navigation() asserts the HTML response contains the configured hostname in <title> and expected nav labels. test_api_404_still_returns_problem_details() asserts the JSON response has title and detail equal to "Not found".

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hippity hoppity, path not found!
A shiny new page where lost routes abound,
With frosted glass panel and links all around,
The breadcrumb shows where you once were bound.
No raw errors now—just a welcoming ground! 🌿

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Make 404 page useful' directly aligns with the changeset, which adds a custom 404.html template, styling, error handler logic, and tests to improve the 404 error page experience.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue-40-nicer-404

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@static/css/styles.css`:
- Line 824: The `word-break: break-word;` property is deprecated and should be
replaced with the modern equivalent. In the CSS rule where `word-break:
break-word;` appears, remove this property and replace it with `overflow-wrap:
break-word;` instead. This achieves the same functionality of allowing long
paths to wrap without breaking mid-word, but uses the current standard CSS
property that is not deprecated.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1d1dafb4-769d-4e59-8b30-2b370f6e367a

📥 Commits

Reviewing files that changed from the base of the PR and between 89e0610 and 192748a.

📒 Files selected for processing (4)

• simple_safer_server/app_factory.py
• static/css/styles.css
• templates/404.html
• tests/test_app_factory_routes.py