fixed #412, fixed #TODO in side menu animation, fixed <a> text being on top of the header (#420)

* fixed overflown text, text above header, animation

* Fixed pre tag overflowing

* fixed h tags overflow

src/components/HeaderBarebone/styles.tsx

@@ -45,6 +45,7 @@ export const HeaderWrapperSticky = styled.div`
   height: 74px;
   position: fixed;
   overflow: hidden;
+  z-index:1;
 
   &::before {
     content: "";

src/components/Markdown/styles.tsx

@@ -39,6 +39,7 @@ export const MarkdownWrapper = styled.div`
   h6 {
     font-family: ${fontFamily.header};
     letter-spacing: -1.75px;
+    overflow-wrap: break-word;
     margin-top: ${BASE_LINE_HEIGHT * 2}px;
     margin-bottom: ${BASE_LINE_HEIGHT}px;
   }
@@ -112,6 +113,7 @@ export const MarkdownWrapper = styled.div`
     letter-spacing: 0.25px;
     color: #ebedee;
     font-family: "IBM Plex Mono", monospace;
+    
   }
 
   :not(pre) > code[class*="language-"],
@@ -124,7 +126,10 @@ export const MarkdownWrapper = styled.div`
   pre > code[class*="language-"] {
     padding: 0;
   }
-
+  pre{
+    overflow-x: auto;
+    min-height:28px; /* to fix line-height causing Y overflow */
+  }
   img {
     max-width: 100%;
   }
@@ -176,7 +181,7 @@ export const MarkdownWrapper = styled.div`
     background-position: 0 100%;
     transition: all 0.125s ease-in;
     font-weight: 700;
-
+    word-break: break-all;
     &:hover {
       color: black;
       background-size: 100% 100%;

src/components/Sidebar/styles.tsx

@@ -16,16 +16,14 @@ export const SidebarWrapper = styled.div`
 
   @media screen and (max-width: 767px) {
     z-index: 100;
-    width: auto;
-    /* TODO: maybe find a less "awkward" way to animate this */
-    left: calc(-100% - 100px);
-    right: calc(100% - 0px);
-    transition: left 0.3s, right 0.3s;
+    width: calc(100vw - 100px);
+    transition: transform 0.2s ease-in-out;
+    transform: translateX(-100vw)
   }
 
   &.is-open {
-    left: 0;
-    right: 100px;
+    transition: transform 0.3s ease-in-out;
+    transform: translateX(0);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   }
 `
@@ -34,7 +32,11 @@ export const Header = styled(Link)`
   display: flex;
   align-items: stretch;
   text-decoration: none;
-
+  height: 74px; /* previously logo chose the height of the header */
+  @media screen and (max-width: 767px) {
+    /* match mobile header height  */
+    height:calc(35px + 32px);
+  }
   &:hover > * {
     opacity: 0.85;
   }
@@ -45,9 +47,9 @@ export const Logo = styled.div`
   justify-content: center;
   align-items: center;
   background: #0b0f13;
-  width: 74px;
-  height: 74px;
+  height: 100%; /* match height of the header*/
   flex: 0 0 74px;
+
 `
 
 export const StyledLogo = styled(TPHLogo)`