fix: emoji picker position

composer/autoload.php

@@ -2,7 +2,7 @@
 
 // SPDX-FileCopyrightText: Chen Asraf <contact@casraf.dev>
 // SPDX-License-Identifier: AGPL-3.0-or-later
-//
+
 declare(strict_types=1);
 
 require_once __DIR__ . '/../vendor/autoload.php';

src/components/PostReactions.vue

@@ -23,8 +23,10 @@
       >
         <span class="icon">+</span>
       </button>
+    </div>
 
-      <!-- Emoji picker -->
+    <!-- Emoji picker (teleported to body for proper fixed positioning) -->
+    <Teleport to="body">
       <Transition name="fade">
         <div v-if="showPicker" class="emoji-picker-overlay" @click="closePicker">
           <div class="emoji-picker-container" @click.stop>
@@ -50,7 +52,7 @@
           </div>
         </div>
       </Transition>
-    </div>
+    </Teleport>
   </div>
 </template>
 
@@ -363,7 +365,23 @@ export default defineComponent({
         color: var(--color-main-text);
       }
     }
+  }
+}
 
+// Transition animations
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+<style lang="scss">
+// Emoji picker overlay - not scoped because it's teleported to body
 .emoji-picker-overlay {
   position: fixed;
   top: 0;
@@ -469,17 +487,4 @@ export default defineComponent({
     }
   }
 }
-  }
-}
-
-// Transition animations
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>