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,29 +407,36 @@ export const PostCard = React.memo(({
                 isLiked={hasLiked}
                 likes={likes.length}
                 comments={comments.length}
+                fullmode={fullmode}
             />
             <PostContent
                 data={data}
                 autoCarrousel={autoCarrousel}
+                fullmode={fullmode}
             />
         </div>
-        <div className="actionsIndicatorWrapper">
+        {!fullmode &&
-            <div className="actionsIndicator">
+            <div className="actionsIndicatorWrapper">
-                <Icons.MoreHorizontal />
+                <div className="actionsIndicator">
+                    <Icons.MoreHorizontal />
+                </div>
             </div>
-        </div>
+        }
-        <div className="actionsWrapper">
+        {!fullmode &&
-            <PostActions
+            <div className="actionsWrapper">
-                isSelf={selfId === data.user_id}
+                <PostActions
-                defaultLiked={hasLiked}
+                    isSelf={selfId === data.user_id}
-                defaultSaved={hasSaved}
+                    defaultLiked={hasLiked}
-                onClickLike={onClickLike}
+                    defaultSaved={hasSaved}
-                onClickSave={onClickSave}
+                    onClickLike={onClickLike}
-                actions={{
+                    onClickSave={onClickSave}
-                    delete: onClickDelete,
+                    actions={{
-                }}
+                        delete: onClickDelete,
-            />
+                    }}
-        </div>
+                    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 {