ui: center She Code Africa logo on mobile viewports

[Amarachi-Ezeonyekwere]

Description

Explicitly resets margin-left to auto inside the media query for .sca_logo in Programs.style.js to ensure the She Code Africa logo is horizontally centered on mobile viewports below 572px.

This PR fixes #8028

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Adjusted logo spacing on applicable screen sizes to reduce bottom margin and maintain automatic left alignment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 63325e7f-d651-4737-b474-5a603d1f2c4a

📥 Commits

Reviewing files that changed from the base of the PR and between a98e439 and 0df45d1.

📒 Files selected for processing (1)

• src/collections/programs/Programs.style.js

💤 Files with no reviewable changes (1)

• src/collections/programs/Programs.style.js

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.

---

📝 Walkthrough

Walkthrough

The mobile .sca_logo styles reduce the bottom margin from 40px to 30px within the 572px breakpoint.

Changes

SCA logo spacing

Layer / File(s)	Summary
Mobile logo spacing src/collections/programs/Programs.style.js	The .sca_logo mobile styles reduce the bottom margin from 40px to 30px.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~2 minutes

Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 0df45

The mobile logo styling change has no identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title claims that the PR centers the logo, but the changeset only reduces the bottom margin from 40px to 30px. The title does not accurately describe the implemented change.	Update the implementation to center .sca_logo on mobile viewports, or change the title to describe the margin adjustment.
Linked Issues check	⚠️ Warning	The PR does not satisfy issue [#8028]. The required horizontal centering is not implemented. The only change reduces the bottom margin within the mobile media query.	Add margin-left: auto or an equivalent centering rule for .sca_logo within the mobile media query. Verify alignment across the required mobile breakpoints.
Out of Scope Changes check	⚠️ Warning	The bottom-margin reduction is not required to center the logo and does not implement the linked issue objective [#8028]. It is an unrelated spacing change within the target component.	Remove the bottom-margin change unless it has a separate requirement. Keep the PR focused on horizontally centering .sca_logo on mobile viewports.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[github-actions]

Preview deployment for PR #8036 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[KumarNirupam1]

hi @Amarachi-Ezeonyekwere could you please share a quick screen recording demonstrating this layout change on mobile viewports .

[Amarachi-Ezeonyekwere]

hi @Amarachi-Ezeonyekwere could you please share a quick screen recording demonstrating this layout change on mobile viewports .

@KumarNirupam1! Thanks for checking in. I'm still working on getting the styling centered properly across all mobile screens. Once I finish polishing and push the final changes, I will share a screen recording here!