Add sticky post header

src/newsreader/js/pages/homepage/components/PostModal.js

@@ -73,10 +73,14 @@ class PostModal extends React.Component {
     return (
       <div className="modal post-modal">
         <div className="post">
+          <div className="post__header">
             <div className="post__actions">
               <button
-              className={`button read-button ${readButtonDisabled && 'button--disabled'}`}
-              onClick={() => !readButtonDisabled && this.props.markPostRead(post, token)}
+                className={`button read-button ${readButtonDisabled &&
+                  'button--disabled'}`}
+                onClick={() =>
+                  !readButtonDisabled && this.props.markPostRead(post, token)
+                }
               >
                 <i className="fas fa-check" /> Mark as read
               </button>
@@ -87,7 +91,7 @@ class PostModal extends React.Component {
                 <i className="fas fa-times"></i> Close
               </button>
             </div>
-          <div className="post__header">
+            <div className="post__heading">
               <h2 className={titleClassName}>{`${post.title} `}</h2>
               <div className="post__meta-info">
                 <span className="post__date">
@@ -124,6 +128,7 @@ class PostModal extends React.Component {
                 />
               </div>
             </div>
+          </div>
 
           {/* HTML is sanitized by the collectors */}
           <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />

src/newsreader/scss/components/post/_post.scss

@@ -15,6 +15,17 @@
 
   cursor: initial;
 
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    position: sticky;
+    top: 0;
+
+    width: 100%;
+  }
+
   &__actions {
     display: flex;
     justify-content: flex-end;
@@ -24,10 +35,11 @@
     gap: 20px;
   }
 
-  &__header {
+  &__heading {
     display: flex;
     flex-direction: column;
     padding: 20px 0 10px 0;
+
     width: 75%;
   }