refactor: update error pages#49
Merged
Merged
Conversation
Refactor code structure for improved readability and maintainability -update dark scheme rendering Co-authored-by: Stu <31927084+yCodeTech@users.noreply.github.com>
- Added container div for improved HTML structure and added classes for better style selectors. - Moved the flex styles from the body to the new container class. - Refined values for widths, margins, and font sizes. - Changed some of the styles to use CSS nesting. - Moved the SVG styles into the main style block to keep all styles together. - Moved the `@media prefers-color-scheme` rules to be nested under each element that it's for. - Updated colours for dark mode. - Auto formatting
Using width stretch the content fills the entire of the flex container space, capping at max-width, so the logo is always at optimum size. Reason why this only affects the 404 page and not 500 page, is because 500 has the additional paragraphs that always makes the content fill the flex container.
There was a problem hiding this comment.
Pull request overview
This PR refactors Valet’s built-in 404.html and 500.html error page templates to modernize layout/styling, improve responsiveness, and unify branding/SVG usage across both pages.
Changes:
- Added responsive viewport meta tags and introduced flexbox-based centering via
.container/.content. - Refactored and consolidated CSS (typography scaling via
clamp(), shared SVG styling patterns). - Updated
500.htmlcontent styling to better present the “valet log nginx” help text.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| cli/templates/500.html | Restructures the 500 error page markup/CSS and updates the SVG + help text presentation. |
| cli/templates/404.html | Restructures the 404 error page markup/CSS and aligns SVG + layout styling with 500 page. |
Width stretch is supported but some browsers require a different name, so we're switching to flex basis 100% instead which does the same job of filling the flex container space, but without an additional property for certain browsers.
Merged
yCodeTech
pushed a commit
that referenced
this pull request
Jul 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request updates the
404.htmland500.htmlerror page templates to improve their appearance, responsiveness, and maintainability. The changes focus on improving layout, using modern CSS, enhancing mobile support, and unify the branding and SVG usage across both pages.HTML Structure, UX, and Responsiveness Improvements:
<style>block for consistency..container,.content) for improved structure and better CSS selectors.Content and Readability Enhancements:
Summary from #41
Styling and Layout Improvements:
Added a responsive
<meta name="viewport">tag and reworked the CSS to use flexbox for centering, improved font scaling withclamp(), and better color handling for both light and dark modes. This ensures the error pages look good on all devices and respect user preferences.Moved inline styles into a
<style>block for maintainability and consistency, and removed redundant or outdated inline style attributes from HTML elements.SVG and Branding Consistency:
500.htmlto match the more modern and maintainable structure from404.html, using consistent class names and gradient definitions. This unifies the branding and reduces code duplication.These updates collectively provide a more polished, user-friendly, and maintainable error page experience.-update dark scheme rendering