fix(frontend): enlarge mobile bottom nav labels to 12px - #225
Merged
Conversation
Deploying openpost-marketing with
|
| Latest commit: |
969d5ed
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8eebe4b8.openpost-marketing.pages.dev |
| Branch Preview URL: | https://hoplite-melos-3e243a32.openpost-marketing.pages.dev |
Deploying openpost-docs with
|
| Latest commit: |
969d5ed
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://97a40336.openpost-docs.pages.dev |
| Branch Preview URL: | https://hoplite-melos-3e243a32.openpost-docs.pages.dev |
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.
Summary
During a UX audit of the core flows (registration, onboarding, composer/publications, media, settings, mobile navigation), the mobile bottom navigation labels stood out as the highest-impact verified papercut: they rendered at 10px (
text-[0.625rem]), below the practical minimum readable size for primary navigation, and violated the app's own 44px-touch-target-with-readable-label bar at phone widths.This PR raises both nav item labels (including "More") to
text-xs(12px) withleading-4(16px) line height. Touch targets are unchanged at 56px height, already above the 44px minimum.Scope decision
Other sub-12px text usages exist (
text-[11px],text-[10px]) in account-management, analytics chart, day-posts modal, feedback dialog, growth profile card, and instance metrics cells. Those are secondary metadata and badge contexts rather than primary navigation, and per audit several are acceptable at their current size; they are deliberately left out of this focused fix.Verification
Verified with Playwright against the running dev server, measuring computed styles on the live DOM in the authenticated app:
After state at 390px light:
Before state at 390px (10px labels) was captured prior to the change. Pixel-level inspection was not performed; the measurements above are computed-style evidence from the rendered DOM.
At ≥768px the nav is hidden by
md:hidden, so desktop layout is unaffected.bun run check:frontend:types— passbun run lintfrontend (oxlint + eslint svelte) — pass; root lint fails only becausegolangci-lintis not installed in this sandbox (backend untouched)bun run check:frontend:i18n— passA changelog fragment was added at
changes/mobile-nav-label-size.mdper repo convention.