Merge pull request #970: Fix styles for blog pages

nextstrain · Jul 31, 2024 · e09a6ba · e09a6ba
2 parents 17ed07f + efb0d4b
commit e09a6ba
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/static-site/src/components/nav-bar/index.tsx b/static-site/src/components/nav-bar/index.tsx
@@ -22,16 +22,16 @@ const NavContainer = styled.div`
   // TODO: Put this component in a container which sets these styles for all pages.
   // This isn't trivial with the current split in page-level components.
   @media (min-width: 768px) {
-    width: 728px;
+    max-width: 728px;
   }
   @media (min-width: 992px) {
-    width: 952px;
+    max-width: 952px;
   }
   @media (min-width: 1200px) {
-    width: 1150px;
+    max-width: 1150px;
   }
   @media (min-width: 1550px) {
-    width: 1500px;
+    max-width: 1500px;
   }
 `;
 

diff --git a/static-site/src/templates/displayMarkdown.jsx b/static-site/src/templates/displayMarkdown.jsx
@@ -69,7 +69,7 @@ export default class GenericTemplate extends React.Component {
           <title>{title}</title>
         </Helmet>
         <SEO title={title} description={description} blogUrlName={blogUrlName} />
-        <SidebarBodyFlexContainer className="container">
+        <SidebarBodyFlexContainer>
           <SidebarContainer $sidebarOpen={this.state.sidebarOpen}>
             <UserDataWrapper>
               <NavBar minified location={this.props.location} />
@@ -104,7 +104,6 @@ const SidebarBodyFlexContainer = styled.div`
   overflow: hidden;  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
   display: flex;  /*enables flex content for its children*/
   flex-direction: row;
-  width: 100% !important;
 `;
 const SidebarContainer = styled.div`
   flex-grow: 1;  /*ensures that the container will take up the full height of the parent container*/