From 5a8a77c35868e0f1a55da92c47ad2a9c2aded0be Mon Sep 17 00:00:00 2001
From: hyesung oh <haesungoh414@gmail.com>
Date: Sun, 24 Jul 2022 05:00:01 +0900
Subject: [PATCH] Remain author section kbar button size and Update header word
 break attr (#105)

* design: append flex-grow at author section's kbar button

* design: append break-word at main header

* design: append break-word at post header
---
 .../src/components/AuthorSection/AuthorSection.tsx     | 10 +++++++++-
 apps/blog/src/components/Header/MainHeader.tsx         |  1 +
 apps/blog/src/components/Header/PostHeader.tsx         |  1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/blog/src/components/AuthorSection/AuthorSection.tsx b/apps/blog/src/components/AuthorSection/AuthorSection.tsx
index d06ddecd..cfac7a2e 100644
--- a/apps/blog/src/components/AuthorSection/AuthorSection.tsx
+++ b/apps/blog/src/components/AuthorSection/AuthorSection.tsx
@@ -27,7 +27,11 @@ function AuthorSection({ marginBottom = '3.5rem', hasKbarButton = false }: Props
         </TextWrapper>
       </Div>
 
-      {hasKbarButton && <KBarToggleButton />}
+      {hasKbarButton && (
+        <KbarButtonWrapper>
+          <KBarToggleButton />
+        </KbarButtonWrapper>
+      )}
     </Section>
   );
 }
@@ -62,3 +66,7 @@ const TextWrapper = styled.div`
 const H2 = styled.h2`
   font-weight: normal;
 `;
+
+const KbarButtonWrapper = styled.div`
+  flex-grow: 1;
+`;
diff --git a/apps/blog/src/components/Header/MainHeader.tsx b/apps/blog/src/components/Header/MainHeader.tsx
index 376ddbdd..74e7c50e 100644
--- a/apps/blog/src/components/Header/MainHeader.tsx
+++ b/apps/blog/src/components/Header/MainHeader.tsx
@@ -29,6 +29,7 @@ const Header = styled.header`
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 0.875rem;
+  word-break: break-word;
 `;
 
 const H1 = styled(Text)`
diff --git a/apps/blog/src/components/Header/PostHeader.tsx b/apps/blog/src/components/Header/PostHeader.tsx
index 2c72d125..6f0f8965 100644
--- a/apps/blog/src/components/Header/PostHeader.tsx
+++ b/apps/blog/src/components/Header/PostHeader.tsx
@@ -29,6 +29,7 @@ const Header = styled.header`
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2.25rem;
+  word-break: break-word;
 `;
 
 const H3 = styled(Text)`