Skip to content

Improve hero feature badge readability on mobile #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vkarpov15 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve hero feature badge readability on mobile #16

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
662bbe8
Improve hero feature pill layout on mobile
vkarpov15 Apr 9, 2026
0ae002a
Restore gray text color for AI Query Assistant label
vkarpov15 Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,13 @@
</div>
<div class="mx-auto max-w-7xl py-20 sm:py-14 lg:py-20">
<div class="mx-auto max-w-4xl text-center">
<span class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700">
<span class="inline-flex max-w-full flex-wrap items-center justify-center gap-2 rounded-2xl border border-gray-200 bg-white px-3 py-3 text-sm font-semibold text-gray-700 sm:rounded-full sm:px-4 sm:py-2">
<span class="rounded-full bg-gray-100 px-2 py-0.5 text-gray-900">New</span>
AI Query Assistant
<span class="text-gray-400">·</span>
Dashboards
<span class="text-gray-400">·</span>
Team Access
<span class="text-gray-700">AI Query Assistant</span>
<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>
Comment on lines +111 to +113
Copy link

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copilot uses AI. Check for mistakes.
<span class="rounded-full bg-slate-50 px-2 py-0.5 text-gray-700 sm:bg-transparent sm:px-0 sm:py-0">Team Access</span>
</span>
<h1 class="mt-5 text-5xl font-semibold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">A Developer-First MongoDB GUI</h1>
<p class="mt-5 text-xl leading-tight text-gray-700 sm:text-3xl sm:leading-tight">Browser-based, model-aware, and AI-assisted MongoDB interface for building and managing applications.</p>
Expand Down