fix layout issues

app/components/DocumentHistory/DocumentHistory.js

@@ -8,6 +8,7 @@ import { type Match, Redirect, type RouterHistory } from "react-router-dom";
 import { Waypoint } from "react-waypoint";
 import styled from "styled-components";
 
+import breakpoint from "styled-components-breakpoint";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DocumentsStore from "stores/DocumentsStore";
 import RevisionsStore from "stores/RevisionsStore";
@@ -105,7 +106,7 @@ class DocumentHistory extends React.Component<Props> {
     return (
       <Sidebar>
         <Wrapper column>
-          <Header justify={"center"}>
+          <Header>
             <Title>History</Title>
             <CloseButton
               icon={<CloseIcon />}
@@ -165,22 +166,27 @@ const Sidebar = styled(Flex)`
   z-index: 1;
 `;
 
-const Title = styled.h3`
-  max-width: 90%;
-  overflow: hidden;
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
   text-overflow: ellipsis;
-  font-size: 20px;
-  margin-top: 0;
-  margin-bottom: 0.25em;
   white-space: nowrap;
-  color: ${(props) => props.theme.text};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  display: none;
+  width: 0;
+
+  ${breakpoint("tablet")`	
+    display: flex;
+    flex-grow: 1;
+  `};
 `;
 
 const Header = styled(Flex)`
   position: relative;
-  padding: 20px;
+  padding: 15.8px;
   border-bottom: 1px solid ${(props) => props.theme.divider};
 `;