From d6653d2136431b05c3b1668346db19b78245b095 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 9 Jan 2022 11:48:55 +0900
Subject: [PATCH] prevent github icon and page title overlap

---
 source/src/pages/Page/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/source/src/pages/Page/index.tsx b/source/src/pages/Page/index.tsx
index 65a11cc..d439e51 100644
--- a/source/src/pages/Page/index.tsx
+++ b/source/src/pages/Page/index.tsx
@@ -23,8 +23,16 @@ import { useEffect } from "react"
 
 const map: Map = _map
 
-const StyledTitle = styled.h1`
+const StyledTitle = styled.h1<{ pageType: PageType }>`
 	margin-bottom: 1rem;
+
+	word-wrap: break-word;
+
+	${(props) => {
+		if (props.pageType == PageType.PORTFOLIO_PROJECT) {
+			return "margin-right: 3rem;"
+		}
+	}}
 `
 
 const PortfolioGithubLinkContainer = styled.div`
@@ -249,7 +257,9 @@ const Page = () => {
 						<GithubLinkIcon link={pageData.repo} />
 					</PortfolioGithubLinkContainer>
 				)}
-				<StyledTitle>{pageData.title}</StyledTitle>
+				<StyledTitle pageType={PageType.PORTFOLIO_PROJECT}>
+					{pageData.title}
+				</StyledTitle>
 
 				{pageType == PageType.PORTFOLIO_PROJECT &&
 					pageData.badges.map((badge) => (