Refactor/to scss title

[oluwatobiss]

Web Dev Path
238

Have you updated the CHANGELOG.md file? If not, please do it.

Yes

What is this change?

• Remove redundant style-components rules
• Prevent inappropriate horizontal scroll caused by overflowing long titles
• Delete unused blogTitle prop in blog/index.js

Were there any complications while making this change?

No

How to replicate the issue?

Steps to replicate the inappropriate horizontal scroll issue:

1. Go to the live site’s blog page.
2. Switch to the mobile view.
3. Click a long tag, for instance the productmanagement tag.

If necessary, please describe how to test the new feature or fix.

Compare the <h2> headings of the “/blog/*” and “/about” pages on the main and refactor/to-scss-snippets-title branches. The two should have the same style. Additionally, overflowing headings of the PR branch should auto-wrap to prevent inappropriate horizontal scrolling.

When should this be merged?

After three approved reviews.

[netlify]

✅ Deploy Preview for webdevpathstage ready!

Name	Link
🔨 Latest commit	5d03e48
🔍 Latest deploy log	https://app.netlify.com/projects/webdevpathstage/deploys/6893429c46942a000736dc5f
😎 Deploy Preview	https://deploy-preview-271--webdevpathstage.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.

[briangesteban]

Looks good to me. Thanks @oluwatobiss for fixing the horizontal page scroll as well!

Just a question though, I'm curious of the teams decision of having a micro component like this. It seems that we could simplify it by just having the actual <h2> element directly on components that are using the <Title> component. And just style it globally or on the components' SCSS module. Is there a reason for the teams decision of having it?

[Satoshi-Sh]

Looks good to me. Thanks for fixing the styling bug

[Satoshi-Sh]

Looks good to me. Thanks @oluwatobiss for fixing the horizontal page scroll as well!

Just a question though, I'm curious of the teams decision of having a micro component like this. It seems that we could simplify it by just having the actual <h2> element directly on components that are using the <Title> component. And just style it globally or on the components' SCSS module. Is there a reason for the teams decision of having it?

Good point. I see both approaches in the codebase. We might need a refactor for consistency at some point.

[oluwatobiss]

Just a question though, I'm curious of the teams decision of having a micro component like this. It seems that we could simplify it by just having the actual <h2> element directly on components that are using the <Title> component. And just style it globally or on the components' SCSS module. Is there a reason for the teams decision of having it?

Hmm. Great question. It could truly simplify it. I will implement this now for the team’s review. Thanks for sharing your thoughts, @briangesteban.

[oluwatobiss]

Refactoring the h2 elements as @briangesteban suggested also helped target the post body’s headings, which also causes a page overflow if the words are too long.

[briangesteban]

Works just fine. Thanks for considering the refactor @oluwatobiss!