Fix reactions bar expansion and positioning

frontend/src/pages/app/resources/css/_reactions.scss

@@ -74,6 +74,15 @@
     }
 }
 
+// Emoji menu wrapper inside reaction bar
+.emoji-menu-wrapper {
+    width: 320px;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 // Context menu wrapper with animations
 .context-menu-wrapper {
     position: relative;
@@ -140,9 +149,9 @@
     border-radius: 16px;
     position: absolute;
     bottom: 100%;
-    min-width: 200px;
     justify-content: center;
     margin-bottom: 10px;
+    transition: width 0.3s ease-out, height 0.3s ease-out;
     
     &.left {
         left: 0;
@@ -153,12 +162,55 @@
         right: 0;
         transform: translateX(0);
     }
+    
+    &.expanded {
+        padding: 0;
+        overflow: hidden;
+        width: 320px;
+        height: 400px;
+        border-radius: 16px;
+        
+        // Default: expand downward from the reaction bar's bottom edge
+        position: absolute;
+        bottom: auto;
+        top: 0;
+        left: 0;
+        transform: translateY(0);
+        
+        &.expand-upward {
+            // Expand upward from the reaction bar's top edge
+            bottom: 100%;
+            top: auto;
+            margin-bottom: 10px;
+            margin-top: 0;
+            transform: translateY(0);
+        }
+
+        .emoji-menu-wrapper {
+            animation: emojiMenuEnter 0.5s ease;
+        }
+    }
+}
+
+@keyframes emojiMenuEnter {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 .reaction-bar-content {
     display: flex;
     align-items: center;
     gap: 4px;
+    transition: opacity 0.3s ease-out;
+    
+    &.faded {
+        opacity: 0;
+    }
 }
 
 .reaction-emoji-button {