# [Bug] Misaligned Display Mode Toolbar in Geography Section #1115
Assignees
spikerj (Joseph Spiker)
Clear assignees
spikerj (Joseph Spiker)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: spikerj/spikersoft-issues#1115
Reference in new issue
Block a user
Summary
The display mode toolbar located in the upper-right corner of the Geography Explorer interface is incorrectly aligned and not properly centered. The issue affects the visual layout and spacing of the toolbar elements that control how countries are displayed on the globe.
Issue Description
In the Geography section, the toolbar that allows users to switch between different display modes (e.g., globe with sidebar, flat map, list view) appears visually misaligned. The icons and labels are not evenly spaced or centered within their container, causing inconsistent alignment relative to the rest of the interface. The issue persists across sessions and browsers.
Environment
Preconditions
User must be logged in and have access to the Geography Explorer interface.
Steps to Reproduce
Expected Result
Toolbar elements should be evenly spaced, properly centered, and visually aligned with the rest of the interface.
Actual Result
Toolbar elements appear misaligned:
Evidence
Impact
Frequency
Always
Reproducibility
100%
Severity
Low
Notes
The issue likely stems from incorrect CSS alignment or flexbox configuration in the toolbar container. It is recommended to review the layout properties (e.g.,
justify-content,align-items, and padding) to ensure consistent centering across display modes.Confirmed from your screenshot — and it is a real mechanism, not just "looks a bit off".
Zooming into the toolbar shows the active (globe) button carrying a round disc that is clearly larger than the button and offset up and to the left, spilling past the switcher's border. That is Material's state layer — the disc it draws for hover/active. Material sizes that disc from its own size token, not from the width and height we set, so shrinking the buttons to 34px left the disc at its default size, still centred on where a full-size button would have been.
Fix: spikerj/spikersoft-angular#896 sets the size token so the button, its state layer and the disc all agree, and removes a line-height that was nudging the glyph inside its box.
A request: this one is CSS-only, and neither our linter nor our tests can see alignment — they have no layout engine. So please re-check it visually on the next deploy and reopen if any of it still looks off to you. Your eye is the actual test here.
While you are in there: your report also mentioned the mode buttons (Explorar / Mis exploraciones / Aprender) being unevenly spaced. I could not reproduce that from the screenshot — that group looks correctly spaced to me. If you are still seeing it, a zoomed screenshot of just that group would help me a lot.
Fixed and merged — closing.
The toolbar buttons sized their state layer independently of the icon, so the active disc sat off-centre. Now driven from one token (spikerj/spikersoft-angular#896).
The change is on
masterand deployed. Please re-test when you get a chance; if you still see it, reopen this issue rather than filing a new one so the history stays together.