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)]">
Originally posted by @gemini-code-assist[bot] in #463 (comment)
To ensure visual consistency when location or country names are long enough to wrap, consider adding the
text-rightutility class. Whileitems-endaligns the spans themselves to the right of the flex container,text-rightensures that the text content within those spans remains right-aligned if it breaks into multiple lines.Originally posted by @gemini-code-assist[bot] in #463 (comment)