Remain author section kbar button size and Update header word break a…

…ttr (#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
hyesungoh · Jul 23, 2022 · 5a8a77c · 5a8a77c · vercel · Jul 23, 2022
1 parent 534ef2d
commit 5a8a77c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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)`