fix(web): always-visible wordmark in navbar#123
Merged
Conversation
The header used <img src="/img/logo.png"> followed by a "Code for Philly" wordmark gated with `hidden md:inline`. The image asset has never existed in the repo, so it rendered as an invisible broken-image on every viewport. Desktop nobody noticed because the wordmark text filled the spot; mobile (where hidden md:inline hides the wordmark) showed an empty home link with no tappable visual. Drop the broken <img> and unhide the wordmark at all breakpoints. The home link is now always visible, always labeled, always tappable. The actual logo asset is a future TODO; the wordmark covers the functional need. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds three brand assets sourced from the project's design files: apps/web/public/img/logo-horizontal.png — icon + wordmark lockup (navbar) apps/web/public/img/logo.png — standalone icon apps/web/public/favicon.png — favicon AppHeader now renders the horizontal lockup in place of the bare "Code for Philly" text wordmark. Image is set as h-8 w-auto so it scales naturally; aria-label stays on the Link for screen readers. index.html picks up the favicon via <link rel="icon">. Test updated to assert the home link's accessible label + alt text since the wordmark is now part of the image instead of separate text. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
1 participant
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
On mobile the navbar's left side was empty — no logo, no wordmark, no visible home link.
Root cause: `AppHeader` rendered `<img src="/img/logo.png">` followed by a "Code for Philly" wordmark with `hidden md:inline`. The image asset has never existed in the repo (no `apps/web/public/img/` directory anywhere), so the `![]()
` rendered as an invisible broken-image on every viewport. On desktop nobody noticed because the wordmark text covered it; on mobile (where the wordmark is hidden) the home link had zero visible content despite still being there in the DOM.
Fix: drop the broken `![]()
` and unhide the wordmark at all breakpoints. The home link is now always visible, always labeled, always tappable.
The actual logo asset is a future TODO worth filing as an issue separately — this PR fixes the functional regression without waiting on the design work.
Test plan
🤖 Generated with Claude Code