fix tabs

packages/app/src/pages/account/tabs/posts.jsx

@@ -21,7 +21,6 @@ export default class UserPosts extends React.Component {
         return <div className="userPosts">
             <PostsList
                 emptyListRender={emptyListRender}
-                onLoadMore={PostModel.getUserPosts}
                 loadFromModel={PostModel.getUserPosts}
                 loadFromModelProps={{
                     user_id: this.props.state.user._id,

packages/app/src/pages/index.jsx

@@ -58,6 +58,7 @@ export default class Dashboard extends React.Component {
             tabs={Tabs}
             navMenuHeader={navMenuHeader}
             extraPanel={extraPanel}
+            primaryPanelClassName="full"
             useSetQueryType
             transition
         />

packages/app/src/pages/login/index.less

@@ -32,6 +32,7 @@
 
         background-image: radial-gradient(rgba(var(--layout-background-contrast), 0.5) 1px, transparent 0),
         radial-gradient(rgba(var(--layout-background-contrast), 0.3) 1px, transparent 0);
+
         background-position: 0 0,
         25px 25px;
         background-size: 50px 50px;

packages/app/src/pages/music/components/feed/index.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import * as antd from "antd"
-import { ImageViewer } from "components"
+import { ImageViewer, UserPreview } from "components"
 import { Icons } from "components/Icons"
 import { Translation } from "react-i18next"
 
@@ -38,11 +38,9 @@ const PlaylistItem = (props) => {
         </div>
         <div className="playlistItem_info">
             <div className="playlistItem_info_title">
-                {playlist.title}
+                <h1>{playlist.title}</h1>
-            </div>
-            <div className="playlistItem_info_author">
-                {playlist.user.username}
             </div>
+            <UserPreview username={playlist.user.username} />
         </div>
         <div className="playlistItem_actions">
             <antd.Button

packages/app/src/pages/music/components/feed/index.less

@@ -6,7 +6,7 @@
 
     max-width: 70vw;
 
-    overflow: hidden;
+    overflow: visible;
 
     .playlistExplorer_section {
         display: flex;
@@ -25,8 +25,9 @@
             //flex-direction: row;
             flex-wrap: wrap;
 
-            justify-content: center;
             align-items: center;
+
+            gap: 20px;
         }
     }
 }
@@ -38,19 +39,19 @@
 
     cursor: pointer;
 
-    width: 45%;
+    width: 15vw;
     height: 10vh;
 
+    min-width: 450px;
+    max-width: 850px;
+
     border-radius: 12px;
 
     transition: all 0.2s ease-in-out;
-    margin-right: 20px;
 
     background-color: var(--background-color-accent);
     border-radius: 8px;
 
-    margin-bottom: 20px;
-
     &:hover {
         .playlistItem_cover {
             transform: scale(1.1);
@@ -92,31 +93,53 @@
     }
 
     .playlistItem_info {
+        display: flex;
+        flex-direction: column;
+        
         width: 100%;
+        max-width: 265px;
 
         padding: 10px;
 
         transition: all 0.2s ease-in-out;
 
         .playlistItem_info_title {
-            font-size: 1.2rem;
+            font-size: 1rem;
             font-weight: 600;
             color: var(--background-color-contrast);
             font-family: "Space Grotesk", sans-serif;
 
-            text-overflow: ellipsis;
             overflow: hidden;
-            white-space: nowrap;
+
+            h1,
+            h4 {
+                overflow: hidden;
+
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin: 0;
+            }
         }
 
-        .playlistItem_info_author {
+        // set userPreview to the bottom of the playlistItem_info
-            font-size: 1rem;
+        .userPreview {
-            font-weight: 400;
+            margin-top: auto;
-            color: var(--text-color);
+            font-size: 0.8rem;
 
-            text-overflow: ellipsis;
+            h1 {
-            overflow: hidden;
+                font-size: 0.8rem;
-            white-space: nowrap;
+            }
+
+            .avatar {
+                display: flex;
+                flex-direction: row;
+
+                align-items: center;
+                justify-content: center;
+                
+                width: 30px;
+                height: 30px;
+            }
         }
     }
 
@@ -124,10 +147,14 @@
         display: flex;
         flex-direction: column;
 
+        align-self: flex-end;
+        justify-self: flex-end;
+
         justify-content: center;
         align-items: center;
 
         height: 100%;
+
         padding: 10px;
 
         .ant-btn {

packages/app/src/pages/posts/components/explore/index.jsx

@@ -43,7 +43,6 @@ export default class ExplorePosts extends React.Component {
             </div>
             {
                 this.state.focusedSearcher || this.state.filledSearcher ? null : <PostsList
-                    onLoadMore={Post.getExplorePosts}
                     loadFromModel={Post.getExplorePosts}
                     watchTimeline={[
                         "post.new",

packages/app/src/pages/posts/components/feed/index.jsx

@@ -23,7 +23,6 @@ export class Feed extends React.Component {
         return <PostsList
             emptyListRender={emptyListRender}
             loadFromModel={FeedModel.getPostsFeed}
-            onLoadMore={FeedModel.getPostsFeed}
             watchTimeline={[
                 "feed.new",
                 "post.delete",

packages/app/src/pages/posts/components/savedPosts/index.jsx

@@ -18,7 +18,6 @@ export class SavedPosts extends React.Component {
         return <PostsList
             emptyListRender={emptyListRender}
             loadFromModel={PostModel.getSavedPosts}
-            onLoadMore={PostModel.getSavedPosts}
         />
     }
 }

packages/app/src/theme/animations.less

@@ -1,6 +1,5 @@
 .fade-transverse-active {
 	transition: all var(--page-transition-duration);
-	height: fit-content;
 	width: 100%;
 }
 

packages/app/src/theme/index.less

@@ -107,6 +107,8 @@ html {
 		position: fixed;
 		overflow: hidden;
 
+		overflow-y: auto;
+
 		width: 100%;
 		height: 100%;