From ac978781ee84ae60db12e60c6aef2520871dc3c0 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 4 Aug 2025 18:15:15 +0100
Subject: [PATCH 1/6] style: Remove redundant style-components rules

---
 components/snippets/Title.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/components/snippets/Title.js b/components/snippets/Title.js
index 5f52e7ba..eb46efac 100644
--- a/components/snippets/Title.js
+++ b/components/snippets/Title.js
@@ -1,12 +1,5 @@
-import styled from 'styled-components';
-
-export const StyledTitle = styled.h2`
-  align-self: flex-start;
-  margin: '0 auto 1rem';
-`;
-
 const Title = ({ title }) => {
-  return <StyledTitle>{title}</StyledTitle>;
+  return <h2>{title}</h2>;
 };
 
 export default Title;

From c096f6eaf003953cf8bca256006179b5cb011146 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 4 Aug 2025 18:23:52 +0100
Subject: [PATCH 2/6] style: Prevent horizontal scroll caused by overflowing
 long titles

---
 components/snippets/Title.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/snippets/Title.js b/components/snippets/Title.js
index eb46efac..55d66f36 100644
--- a/components/snippets/Title.js
+++ b/components/snippets/Title.js
@@ -1,5 +1,7 @@
+const styleProp = { overflowWrap: 'break-word', hyphens: 'auto' };
+
 const Title = ({ title }) => {
-  return <h2>{title}</h2>;
+  return <h2 style={styleProp}>{title}</h2>;
 };
 
 export default Title;

From 4e3d7db9373891faf3777723f3f717889d146db0 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 4 Aug 2025 18:36:22 +0100
Subject: [PATCH 3/6] chore: Delete unused blogTitle prop

---
 pages/blog/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/blog/index.js b/pages/blog/index.js
index 3d03e1ea..baa218fc 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -29,7 +29,7 @@ export default function Blog({ posts }) {
     <>
       <Container>
         <BlogSearch>
-          <Title blogTitle title={!searchTerm && 'Latest Posts'} />
+          <Title title={!searchTerm && 'Latest Posts'} />
           <SearchBar setSearchTerm={setSearchTerm} />
         </BlogSearch>
       </Container>
@@ -48,8 +48,10 @@ export default function Blog({ posts }) {
 }
 
 export async function getStaticProps() {
-  const PER_PAGE = 1000
-  const res = await fetch(`https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`);
+  const PER_PAGE = 1000;
+  const res = await fetch(
+    `https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`,
+  );
   const posts = await res.json();
 
   return {

From 2634177c52cd6ee5650cb59b9ab1c88385f49698 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 4 Aug 2025 18:39:09 +0100
Subject: [PATCH 4/6] docs: Add Title to list of components migrated from
 styled-components to scss

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18701ee9..e112cd46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -175,6 +175,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Row
   - Container
   - Wrapper
+  - Title
   - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
@@ -184,4 +185,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - about page
   - home(index) page
 - Created a combineClasses function to clean up conditional class handling
-- Rename RowAlignLeft to Row
\ No newline at end of file
+- Rename RowAlignLeft to Row

From b2ae1f9991564afe37a1b0d15ce9225136e86b49 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Mon, 4 Aug 2025 18:44:47 +0100
Subject: [PATCH 5/6] docs: Document the inapt horizontal page scroll fix

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e112cd46..9319887f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -156,6 +156,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Updated husky script to avoid warning
 - Resolved incorrect meta tag rendering for nested routes
+- Prevent horizontal page scroll caused by overflowing long titles
 
 ### Changed
 

From 1ab017d1f51d7af62491ebfa123b98cb89c2b5a8 Mon Sep 17 00:00:00 2001
From: Oluwatobi Sofela <oluwatobiss@codesweetly.com>
Date: Wed, 6 Aug 2025 12:49:08 +0100
Subject: [PATCH 6/6] style: Use global ruleset for all h2s

This ensures the post content's overflowing h2 does not cause horizontal scroll
---
 components/blog/BlogPostsContainer/index.js | 5 ++---
 components/snippets/Title.js                | 7 -------
 pages/about.js                              | 5 ++---
 pages/blog/index.js                         | 4 +---
 styles/globals.scss                         | 5 +++++
 5 files changed, 10 insertions(+), 16 deletions(-)
 delete mode 100644 components/snippets/Title.js

diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index d6ceeaaa..5c51ce91 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -28,11 +27,11 @@ const BlogPostsContainer = ({
       <section className={styles.blogContainer}>
         {heading ? (
           <Container>
-            <Title title={heading} />
+            <h2>{heading}</h2>
           </Container>
         ) : tag ? (
           <Container>
-            <Title title={tagToHeading[tag]} />
+            <h2>{tagToHeading[tag]}</h2>
           </Container>
         ) : null}
         {swipe ? (
diff --git a/components/snippets/Title.js b/components/snippets/Title.js
deleted file mode 100644
index 55d66f36..00000000
--- a/components/snippets/Title.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const styleProp = { overflowWrap: 'break-word', hyphens: 'auto' };
-
-const Title = ({ title }) => {
-  return <h2 style={styleProp}>{title}</h2>;
-};
-
-export default Title;
diff --git a/pages/about.js b/pages/about.js
index e5ff5921..7a1c91fd 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,6 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoalsCardsColumns';
-import Title from '@/components/snippets/Title';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -102,7 +101,7 @@ export default function AboutUs() {
       </RevealContentContainer>
       <RevealContentContainer>
         <Container>
-          <Title title='Our goals' />
+          <h2>Our goals</h2>
         </Container>
         <OurGoalsCardsColumns
           cards={[
@@ -229,7 +228,7 @@ export default function AboutUs() {
       <RevealContentContainer>
         <Wrapper customClass='primary__accent'>
           <Container>
-            <Title title='Who we are' />
+            <h2>Who we are</h2>
             <Row>
               {whoWeAre.map(_ => {
                 return (
diff --git a/pages/blog/index.js b/pages/blog/index.js
index baa218fc..aa3a5f04 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
-import Title from '@/components/snippets/Title';
 import { BlogSearch } from '@/components/snippets/BlogSearch';
 import { blogRevalidate } from '@/utils/config';
 import { tagToHeading } from '@/utils/blogCategories';
@@ -29,11 +28,10 @@ export default function Blog({ posts }) {
     <>
       <Container>
         <BlogSearch>
-          <Title title={!searchTerm && 'Latest Posts'} />
+          <h2>{!searchTerm && 'Latest Posts'}</h2>
           <SearchBar setSearchTerm={setSearchTerm} />
         </BlogSearch>
       </Container>
-
       <BlogPostsContainer posts={filteredPosts} heading={heading} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (
diff --git a/styles/globals.scss b/styles/globals.scss
index 9018aa80..3b90009c 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -14,3 +14,8 @@
   --dark-bg: #023047;
   --error: #be1313;
 }
+
+h2 {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}