fix(profile): improve layout alignment, spacing and centering (#403)

[SabirKazi135]

Date: 02 Dec 2025

Developer Name: Sabir Kazi

---

Issue Ticket Number

Closes #403

Description

This PR fixes the UI layout issues on the Profile page.

Changes Made

• Centered the entire profile layout using .profile-wrapper
• Reduced excessive top spacing in .profile-container
• Centered the user avatar using flexbox alignment
• Improved spacing and readability of the warning/error message
• Added consistent spacing between profile fields using gap
• Centered the submit button for better visual balance
• Changes limited to profile.hbs and profile.css only

These changes improve readability, reduce excessive white space, and create a much cleaner UI layout.

Documentation Updated?

• Yes
• No

Under Feature Flag

• Yes
• No

Database Changes

• Yes
• No

Breaking Changes

• Yes
• No

Development Tested?

• Yes
• No

Page was tested locally at /profile after applying layout fixes.

Screenshots

Profile Page UI After Fix

Test Coverage

Not Applicable

UI-only changes; no tests modified.

Additional Notes

• Only UI/markup was changed.
• No routing, service, or API logic modified.
• Temporary development changes (profile.js + mirage config) were reverted before committing.

[coderabbitai]

Summary by CodeRabbit

• Style
  • Optimized profile page layout with refined vertical spacing and visual alignment
  • Centered profile image container for improved visual presentation
  • Enhanced error message display with improved readability

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

The profile page layout is restructured with a new wrapper div and CSS styling updates to center content and adjust spacing. Changes affect visual presentation and component positioning without modifying functional logic.

Changes

Cohort / File(s)	Summary
Profile Layout & Styling app/templates/profile.hbs, app/styles/profile.css	Added outer .profile-wrapper div for flex-based content centering; reduced .profile-container top margin from 3rem to 1.5rem; expanded .profile-page-error styling with adjusted margins, line height, and font size; added flex centering to .picture_container for profile image alignment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Straightforward CSS styling adjustments with no complex logic
• Simple structural wrapper addition to template with no control flow changes
• Homogeneous pattern across both files (both are layout/presentation-focused)
• Limited file scope and minimal risk of unintended side effects

Poem

🐰 A wrapper here, some spacing there,
Centering images with graceful care,
CSS tweaks make the layout shine,
Profile pages now align so fine!

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The linked issue #403 is about writing tests for userStatus component, while this PR only fixes UI layout on the profile page with no test implementations.	Review whether this PR should close issue #403 or if the issue references are mismatched. The PR fixes UI but doesn't address the testing objectives stated in #403.
Out of Scope Changes check	⚠️ Warning	The PR changes are limited to profile.hbs and profile.css for UI layout improvements, which appear unrelated to the test-writing objectives of issue #403.	Clarify the relationship between issue #403 and these UI changes. If the UI fix is unrelated to the testing requirements, consider linking to the correct issue or creating a separate PR.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main UI layout improvements made to the profile page, matching the primary changes in CSS and template files.
Description check	✅ Passed	The PR description clearly relates to the changeset, detailing specific UI/layout fixes made to profile.hbs and profile.css.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5f0fd49 and b5c9710.

📒 Files selected for processing (2)

• app/styles/profile.css (3 hunks)
• app/templates/profile.hbs (1 hunks)

🔇 Additional comments (7)

app/styles/profile.css (5)

1-5: New profile-wrapper correctly centers layout.

The flex-based centering with justify-content: center and width: 100% provides a reliable centering mechanism for the profile container, aligning with the PR objective to center the entire profile layout.

---

12-12: Top margin reduction improves spacing hierarchy.

Reducing .profile-container top margin from 3rem to 1.5rem addresses the excessive top spacing mentioned in the PR objectives and improves visual balance.

---

51-54: Error message styling enhancements improve readability.

The additions of margin-top (0.75rem), margin-bottom (1.25rem), line-height (1.4), and font-size (0.9rem) create better visual hierarchy and spacing for the error message, making it more prominent and easier to read without overwhelming the layout.

---

99-108: Picture container centering: explicit flex alignment complements existing margin approach.

The addition of display: flex, justify-content: center, and align-items: center (lines 105–107) works alongside the existing margin: auto and text-align: center (lines 102–103). While this creates mild redundancy, the explicit flex centering is a best practice for robust cross-browser alignment and makes the centering intent clearer. No issues detected.

---

198-219: Responsive breakpoints properly maintained.

The media queries at 1024px and 640px remain intact and correctly adjust grid layout and form positioning at smaller viewport sizes. Verify that the new .profile-wrapper centering does not inadvertently affect these responsive adjustments.

app/templates/profile.hbs (2)

2-63: Template wrapper integration correct; structure and bindings preserved.

The new profile-wrapper div properly encloses the profile-container without modifying any functional logic, data bindings, or event handlers. All field rendering (lines 39–54), form submission (line 5), conditional logic (lines 29–38), and button interactions remain intact. The indentation is consistent and valid Handlebars syntax.

---

2-4: Verify template nesting in Ember compilation context.

Ensure that the additional div nesting level (profile-wrapper → profile-container → form elements) does not interfere with Ember's component lifecycle, change detection, or template re-rendering behavior. Confirm the template compiles without errors and renders correctly by inspecting the Handlebars syntax and file structure in app/templates/profile.hbs.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for staging-my ready!

Name	Link
🔨 Latest commit	b5c9710
🔍 Latest deploy log	https://app.netlify.com/projects/staging-my/deploys/692eec7dbe1b40000867ef71
😎 Deploy Preview	https://deploy-preview-639--staging-my.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.