# [Enhancement] Review and Align Icons and Elements Across Site #1159

New Issue

2026-10-02T01:07:23Z

enjin2310 commented

2026-10-02 01:07:23 +00:00

Summary

Throughout the SpikerSoft platform, several icons and UI elements appear misaligned or off-center within their containers. This affects both vertical and horizontal alignment, leading to inconsistent visual presentation. A global review of alignment properties is recommended to ensure uniformity and proper centering.

Issue Description

Multiple sections across the site (e.g., navigation menus, profile panels, family dashboard, and travel modules) show icons and text that are not properly centered. Some elements appear slightly offset or unevenly spaced, suggesting missing or inconsistent CSS alignment properties such as items-center or text-center.

Environment

Property	Value
Application	SpikerSoft
Module	Global UI / Layout
Environment	Production
Browser	Firefox / Chrome
Operating System	Windows 11
Version	v2026.10.01a
Device	Desktop

Preconditions

User navigates through multiple sections of the site (e.g., Family, Travel, Dashboard).

Steps to Reproduce

Open SpikerSoft and log in.
Navigate through different modules (e.g., Family, Travel, Profile).
Observe icon and text alignment within containers and buttons.
Note inconsistent centering or spacing in several areas.

Expected Result

All icons and text should be properly centered both vertically and horizontally within their containers, maintaining consistent spacing and alignment across the site.

Actual Result

Icons and text appear slightly misaligned or off-center.
Some containers show uneven padding or inconsistent alignment.
Visual balance varies between modules.

Evidence

Observed across multiple sections including Family, Travel, and Profile menus.
Misalignment visible in icons and placeholder elements.

Impact

Reduces visual consistency and polish of the interface.
Affects overall user experience and perceived design quality.
Minor but widespread UI issue.

Frequency

Always

Reproducibility

100%

Severity

Low (UI/UX enhancement)

Suggested Improvement

Conduct a global audit of icon and text alignment across all modules.
Confirm that containers use proper alignment properties such as:
- items-center for flexbox alignment
- text-center for text elements
- Consistent padding and margin values
Apply standardized spacing rules to ensure uniform visual balance.

Aditional Note

Images below must be used as examples, this bug is encountered all across site

## Summary Throughout the **SpikerSoft** platform, several icons and UI elements appear misaligned or off-center within their containers. This affects both vertical and horizontal alignment, leading to inconsistent visual presentation. A global review of alignment properties is recommended to ensure uniformity and proper centering. ## Issue Description Multiple sections across the site (e.g., navigation menus, profile panels, family dashboard, and travel modules) show icons and text that are not properly centered. Some elements appear slightly offset or unevenly spaced, suggesting missing or inconsistent CSS alignment properties such as `items-center` or `text-center`. ## Environment | Property | Value | |-----------|--------| | Application | SpikerSoft | | Module | Global UI / Layout | | Environment | Production | | Browser | Firefox / Chrome | | Operating System | Windows 11 | | Version | v2026.10.01a | | Device | Desktop | ## Preconditions User navigates through multiple sections of the site (e.g., Family, Travel, Dashboard). ## Steps to Reproduce 1. Open **SpikerSoft** and log in. 2. Navigate through different modules (e.g., Family, Travel, Profile). 3. Observe icon and text alignment within containers and buttons. 4. Note inconsistent centering or spacing in several areas. ## Expected Result All icons and text should be properly centered both vertically and horizontally within their containers, maintaining consistent spacing and alignment across the site. ## Actual Result - Icons and text appear slightly misaligned or off-center. - Some containers show uneven padding or inconsistent alignment. - Visual balance varies between modules. ## Evidence - Observed across multiple sections including Family, Travel, and Profile menus. - Misalignment visible in icons and placeholder elements. ## Impact - Reduces visual consistency and polish of the interface. - Affects overall user experience and perceived design quality. - Minor but widespread UI issue. ## Frequency Always ## Reproducibility 100% ## Severity Low (UI/UX enhancement) ## Suggested Improvement - Conduct a **global audit** of icon and text alignment across all modules. - Confirm that containers use proper alignment properties such as: - `items-center` for flexbox alignment - `text-center` for text elements - Consistent padding and margin values - Apply standardized spacing rules to ensure uniform visual balance. ## Aditional Note Images below must be used as examples, this bug is encountered all across site

Screenshot 2026-10-01 194305.png

240 KiB

Screenshot 2026-10-01 194319.png

312 KiB

spikerj commented

2026-10-02 03:23:39 +00:00

Thanks for the eye for visual polish — that's a valuable instinct in a tester.

Closing this one as too broad to act on: "review all icons across the site" has no point where it's verifiably done, so it can't be fixed or re-tested. Your screenshots did surface real problems, though, and they've been moved where they can be fixed:

Family page avatar / role icons → tracked in #1158 (confirmed bug).
"Ver inicio público" / "Volver a mi panel" buttons, icon sits above the text → a real bug in how that button is built: the <mat-icon> sits inside an @switch block, so Angular Material can't project it into the button's icon slot and it loses its alignment. Fixed alongside #1160.
Profile card headers ("Acerca de", "Hacer una donación") → we checked these and they're vertically aligned; the gap between icon and title is intentional spacing, not a defect.

Tip for next time: the reports that get fixed fastest name one page, one element, what's wrong, and what you expected — e.g. "On / (signed in), the globe icon in the 'Ver inicio público' button sits higher than its text; expected it centred." If you spot other misaligned icons, please open one issue per element with the URL and the element circled in the screenshot.

Thanks for the eye for visual polish — that's a valuable instinct in a tester. Closing this one as **too broad to act on**: "review all icons across the site" has no point where it's verifiably *done*, so it can't be fixed or re-tested. Your screenshots did surface real problems, though, and they've been moved where they can be fixed: - **Family page avatar / role icons** → tracked in #1158 (confirmed bug). - **"Ver inicio público" / "Volver a mi panel" buttons, icon sits above the text** → a real bug in how that button is built: the `<mat-icon>` sits inside an `@switch` block, so Angular Material can't project it into the button's icon slot and it loses its alignment. Fixed alongside #1160. - **Profile card headers ("Acerca de", "Hacer una donación")** → we checked these and they're vertically aligned; the gap between icon and title is intentional spacing, not a defect. **Tip for next time:** the reports that get fixed fastest name *one page, one element, what's wrong, and what you expected* — e.g. *"On `/` (signed in), the globe icon in the 'Ver inicio público' button sits higher than its text; expected it centred."* If you spot other misaligned icons, please open one issue per element with the URL and the element circled in the screenshot.

spikerj closed this issue

2026-10-02 03:23:39 +00:00

spikerj referenced this issue from a commit

2026-10-02 03:31:15 +00:00

fix(home-switch): show the home bar on /dashboard and fix its button icons

spikerj referenced this issue

2026-10-02 03:42:04 +00:00

# [Bug] “Back to Dashboard” and “View Public Home” Buttons Not Persisting Across Navigation #1160

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#1159