improve fullmode post layout

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

@@ -349,6 +349,16 @@ export const PostCard = React.memo(({
         return events.onDoubleClick(data)
     }
 
+    React.useEffect(() => {
+        if (fullmode) {
+            app.eventBus.emit("style.compactMode", true)
+        }
+
+        return () => {
+            app.eventBus.emit("style.compactMode", false)
+        }
+    }, [])
+
     React.useEffect(() => {
         // first listen to post changes
         window.app.api.namespaces["main"].listenEvent(`post.dataUpdate.${data._id}`, onDataUpdate)
@@ -397,17 +407,22 @@ export const PostCard = React.memo(({
                 isLiked={hasLiked}
                 likes={likes.length}
                 comments={comments.length}
+                fullmode={fullmode}
             />
             <PostContent
                 data={data}
                 autoCarrousel={autoCarrousel}
+                fullmode={fullmode}
             />
         </div>
+        {!fullmode &&
             <div className="actionsIndicatorWrapper">
                 <div className="actionsIndicator">
                     <Icons.MoreHorizontal />
                 </div>
             </div>
+        }
+        {!fullmode &&
             <div className="actionsWrapper">
                 <PostActions
                     isSelf={selfId === data.user_id}
@@ -418,8 +433,10 @@ export const PostCard = React.memo(({
                     actions={{
                         delete: onClickDelete,
                     }}
+                    fullmode={fullmode}
                 />
             </div>
+        }
     </div>
 })
 

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

@@ -33,6 +33,51 @@
 
     &.fullmode {
         max-width: none;
+        height: 100%;
+
+        background-color: transparent;
+
+        filter: none;
+
+        .actionsIndicatorWrapper {
+            opacity: 0;
+        }
+
+        .actionsWrapper {
+            opacity: 1;
+        }
+
+        .wrapper {
+            height: 100%;
+
+            .content {
+                height: 100%;
+
+                .additions {
+                    height: fit-content;
+                    max-height: 80vh;
+
+                    .addition {
+                        display: flex !important;
+                        flex-direction: column;
+
+                        align-items: center;
+                        justify-content: center;
+
+                        img,
+                        video {
+                            width: fit-content;
+                            height: 100%;
+
+                            align-self: center;
+
+                            object-fit: contain;
+                            border-radius: 8px;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .wrapper {