Fix text alignment for wrapped location/country labels#466
Fix text alignment for wrapped location/country labels#466jbampton merged 5 commits intoNextCommunity:mainfrom
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a new user profile for Rishabh Singh and updates the layout in src/index.njk to include right-aligned text for location and country labels. A review comment suggests removing the shrink-0 utility class from the location container to prevent layout overflow on smaller screens and ensure text wraps correctly.
There was a problem hiding this comment.
Pull request overview
This PR addresses a UI issue on the developer directory index page where the location/country badge text alignment looks incorrect when the labels wrap, and it also adds a new developer profile entry.
Changes:
- Add
text-rightto the location/country badge container on the index page to keep wrapped lines right-aligned. - Add a new developer profile YAML for
2005rishabh.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/index.njk | Right-align wrapped lines in the location/country label block via Tailwind text-right. |
| src/users/2005rishabh.yaml | Adds a new developer profile with required fields (name, github, country, location, role, languages, bio). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
/gemini review |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Code Review
This pull request adds a new user profile for Rishabh Singh and updates the layout of the location metadata in the index page. Feedback suggests that removing the shrink-0 class from the metadata container could cause layout issues on small screens, potentially squeezing the text into an awkward vertical stack; adding width constraints was recommended to ensure a more balanced display.
| {% set location = person.data.location %} | ||
| {% if location or country %} | ||
| <div class="flex flex-col items-end gap-0.5 shrink-0 text-[10px] bg-[var(--bg-footer)] text-[var(--text-muted)] px-2 py-1 rounded font-bold uppercase border border-[var(--border-color)]"> | ||
| <div class="flex flex-col items-end text-right gap-0.5 text-[10px] bg-[var(--bg-footer)] text-[var(--text-muted)] px-2 py-1 rounded font-bold uppercase border border-[var(--border-color)]"> |
There was a problem hiding this comment.
The removal of shrink-0 combined with the flex-1 container on the left (line 27) will cause this metadata block to be squeezed to its minimum width whenever the name or role text is long. While this forces the wrapping you intended, it can lead to an awkward vertical stack of single words if the available space is very tight. Consider adding a min-w-[...] or max-w-[...] to maintain a more balanced layout between the name and the location metadata.
github-project-automation
Bot
moved this from Review in progress
to Reviewer approved
in Next
* fix(ui): prevent metadata layout from shrinking Add min-w, max-w, and shrink-0 to the location/country metadata container to avoid it collapsing when name or role text is long. Addresses review feedback from PR #466. * Add Saish Wadnere to developer directory * Use standard Tailwind spacing classes instead of arbitrary values * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: John Bampton <jbampton@users.noreply.github.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Fixes #463
text-rightto ensure proper alignment when location/country text wraps