some improvements to post list render lifecycle

packages/app/src/components/PostCard/index.less

@@ -4,11 +4,11 @@
 
     width: 35vw;
     min-width: 300px;
-    max-width: 600px;
+    max-width: 800px;
-
+    
+    //max-width: 600px;
     //min-height: 165px;
     //height: 100%;
-    max-width: 800px;
 
     background-color: var(--background-color-accent);
 

packages/app/src/components/PostsList/index.jsx

@@ -366,6 +366,46 @@ export class PostsListsComponent extends React.Component {
             </div>
         }
 
+        return <div className="post-list_wrapper">
+            <LoadMore
+            ref={this.listRef}
+            className="post-list"
+            loadingComponent={LoadingComponent}
+            noResultComponent={NoResultComponent}
+            hasMore={this.state.hasMore}
+            fetching={this.state.loading}
+            onBottom={this.onLoadMore}
+        >
+            {
+                !this.state.realtimeUpdates && <div className="resume_btn_wrapper">
+                    <antd.Button
+                        type="primary"
+                        shape="round"
+                        onClick={this.onResumeRealtimeUpdates}
+                        loading={this.state.resumingLoading}
+                        icon={<Icons.SyncOutlined />}
+                    >
+                        Resume
+                    </antd.Button>
+                </div>
+            }
+            {
+                this.state.list.map((data) => {
+                    return React.createElement(typeToComponent[data.type ?? "post"] ?? PostCard, {
+                        key: data._id,
+                        data: data,
+                        events: {
+                            onClickLike: this.onLikePost,
+                            onClickSave: this.onSavePost,
+                            onClickDelete: this.onDeletePost,
+                            onClickEdit: this.onEditPost,
+                        }
+                    })
+                })
+            }
+        </LoadMore>
+        </div>
+
         return <AutoSizer
             disableWidth
             style={{

packages/app/src/components/PostsList/index.less

@@ -1,13 +1,28 @@
-.postList {
+.post-list_wrapper {
+    display: flex;
+    flex-direction: column;
+
+    position: relative;
+
+    width: fit-content;
+
+    //overflow: hidden;
+    overflow-y: overlay;
+
+    height: 100%;
     width: 100%;
+}
+
+.post-list {
+    position: relative;
 
     // WARN: Only use if is a performance issue (If is using virtualized list)
     //will-change: transform;
-
     overflow: hidden;
     overflow-y: overlay;
-
+    
-    height: max-content;
+    width: 100%;
+    height: 100%;
 
     display: flex;
     flex-direction: column;
@@ -17,17 +32,25 @@
     border-radius: 8px;
 
     margin: auto;
+    z-index: 150;
+    
 }
 
 .resume_btn_wrapper {
     z-index: 200;
 
-    position: absolute;
+    position: sticky;
 
     top: 0;
     right: 0;
 
-    transform: translate(0, -50%);
+    padding: 10px;
+    background-color: rgba(var(--background-color-accent-values), 0.8);
+
+    border-radius: 8px;
+
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 
     width: 100%;
     height: fit-content;
@@ -36,6 +59,10 @@
     justify-content: center;
     align-items: center;
 
+    width: 35vw;
+    min-width: 300px;
+    max-width: 800px;
+
     opacity: 0;
 
     animation: fadeIn 150ms ease-in-out forwards;