Fix location overlap on index page user locations#463
Fix location overlap on index page user locations#463jbampton merged 5 commits intoNextCommunity:mainfrom
Conversation
jbampton
commented
May 2, 2026
jbampton
commented
![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 modifies the location display in src/index.njk to use a line break instead of a comma when both location and country are provided. The review feedback highlights that the multi-line formatting in the template will introduce unwanted whitespace in the UI and that the
tag may cause the styled to appear broken; it is recommended to use a block-level display class and keep the template logic on a single line to maintain visual integrity.
|
/gemini review |
There was a problem hiding this comment.
Pull request overview
Updates the index page’s user-card header rendering to prevent long “location, country” strings from overlapping or crowding other header content by stacking the two values.
Changes:
- Render
locationandcountryon separate lines (only inserting a line break when both are present).
💡 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 modifies the location display in src/index.njk to use a line break instead of a comma when both a location and country are present. Feedback indicates that the multi-line formatting in the template introduces unwanted whitespace in the rendered HTML, which may cause alignment issues within the UI component.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request modifies the location and country display in src/index.njk to stack them vertically. The review feedback highlights that the current implementation using a
tag and multi-line Nunjucks syntax introduces unwanted whitespace in the rendered HTML. It is recommended to use Tailwind's flexbox utilities to stack the elements cleanly and maintain proper alignment.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request updates the layout for displaying location and country information in src/index.njk, switching from a single-line comma-separated format to a stacked vertical layout using Flexbox. Feedback suggests improving the legibility of the stacked text by adding a vertical gap and using a semantically correct div instead of a span for the multi-line container.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request modifies the location badge in src/index.njk to use a vertical flexbox layout, separating the location and country into distinct lines. The reviewer suggests using items-end instead of items-center to ensure the text aligns correctly with the right-hand positioning of the badge.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request updates the location and country display in src/index.njk by replacing the single-line comma-separated format with a vertical flex layout. A review comment suggests adding the text-right utility class to the container to ensure that text remains right-aligned if the location or country names are long enough to wrap onto multiple lines.
| <span class="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)]"> | ||
| {{ location }}{% if location and country %}, {% endif %}{{ country }} | ||
| </span> | ||
| <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)]"> |
There was a problem hiding this comment.
To ensure visual consistency when location or country names are long enough to wrap, consider adding the text-right utility class. While items-end aligns the spans themselves to the right of the flex container, text-right ensures that the text content within those spans remains right-aligned if it breaks into multiple lines.
<div class="flex flex-col items-end text-right 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)]">
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
