Repository navigation
fix(event-page): stop meta icons shrinking when text wraps - #512
Merged
Merged
Conversation
The event page meta rows are inline-flex, so a venue name that wraps on mobile squeezed its SVG icon below 16px. Keep .icon at its set size. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DBQiA4CmwucXykEE12LiY
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Contributor
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
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
2 participants
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.
What changed
On the public event page (
buzz/www/event/index.html), each date/time/venue row is aninline-flex.meta-item, with an SVG.iconnext to the text. When the text wraps (for example, a long venue address on mobile), flexbox shrinks the SVG below its 16px size, so the pin icon looks squashed. This addsflex-shrink: 0to.iconinbuzz/public/themes/base.cssso icons keep their size.Demo
I rendered the real
base.csswith the event page's meta markup at a 375px viewport in Chromium. The icon sizes were measured withgetBoundingClientRect:16x16 16x16 10.27x16. The pin icon is squashed to about 10px wide.16x16 16x16 16x16.Testing