Improve hero feature badge readability on mobile#16
Open
vkarpov15 wants to merge 2 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Improves the homepage hero “feature badge” layout so the multi-item label remains readable on small screens by allowing wrapping and adjusting styling for mobile while preserving the desktop presentation.
Changes:
- Updated the hero badge container to
flex-wrapwith mobile-friendly padding and corner radius. - Hid the dot separators on small screens and rendered secondary items as chip-like spans for better mobile readability.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+111
to
+113
| <span class="hidden text-gray-400 sm:inline">·</span> | ||
| <span class="rounded-full bg-slate-50 px-2 py-0.5 text-gray-700 sm:bg-transparent sm:px-0 sm:py-0">Dashboards</span> | ||
| <span class="hidden text-gray-400 sm:inline">·</span> |
There was a problem hiding this comment.
The middle-dot separators are purely decorative but will be announced by screen readers on desktop (sm+). Consider adding aria-hidden="true" (or role="presentation") to these separator spans so they don’t add noise to assistive tech output.
Suggested change
| <span class="hidden text-gray-400 sm:inline">·</span> | |
| <span class="rounded-full bg-slate-50 px-2 py-0.5 text-gray-700 sm:bg-transparent sm:px-0 sm:py-0">Dashboards</span> | |
| <span class="hidden text-gray-400 sm:inline">·</span> | |
| <span class="hidden text-gray-400 sm:inline" aria-hidden="true">·</span> | |
| <span class="rounded-full bg-slate-50 px-2 py-0.5 text-gray-700 sm:bg-transparent sm:px-0 sm:py-0">Dashboards</span> | |
| <span class="hidden text-gray-400 sm:inline" aria-hidden="true">·</span> |
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.
Motivation
AI Query Assistant · Dashboards · Team Accessgroup renders cleanly and remains readable on small screens.Description
public/index.htmlto use a wrapping, max-width-aware inline-flex container with adjusted padding and rounded corners for mobile, hide dot separators on small screens, and render secondary items as chip-like spans while preserving desktop behavior.Testing
npm test, which returned 2 passing and 1 failing test; the failing test isapi/track- "uses a dedicated createConnection and caches it across requests" and is unrelated to this HTML/CSS change.Codex Task