diff --git a/src/components/Emoji.vue b/src/components/Emoji.vue
index 2bfde959..cbed23b8 100644
--- a/src/components/Emoji.vue
+++ b/src/components/Emoji.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="overflow-hidden" :style="sizeStyle">
+    <div ref="containerRef" class="relative overflow-hidden" :style="sizeStyle">
         <div
             v-if="image.frames"
-            class="avatar"
-            :style="generateEmojiStyle(imageUrl, image.framesOverTime, image.frames, image.loopStyle, size)"></div>
+            class="avatar absolute top-0 left-0"
+            :style="generateEmojiStyle(imageUrl, image.framesOverTime, image.frames, image.loopStyle, effectiveSize)"></div>
         <Avatar v-else class="rounded w-full h-full">
             <AvatarImage :src="imageUrl" class="object-cover" />
             <AvatarFallback class="rounded">
@@ -15,6 +15,7 @@
 
 <script setup>
     import { computed, onMounted, ref, watch } from 'vue';
+    import { useResizeObserver } from '@vueuse/core';
     import { Image } from 'lucide-vue-next';
 
     import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
@@ -29,6 +30,23 @@
         size: { type: Number, default: 0 }
     });
 
+    const containerRef = ref(null);
+    const observedWidth = ref(0);
+
+    useResizeObserver(containerRef, (entries) => {
+        const entry = entries[0];
+        if (entry) {
+            observedWidth.value = entry.contentRect.width;
+        }
+    });
+
+    const effectiveSize = computed(() => {
+        if (props.size > 0) {
+            return props.size;
+        }
+        return observedWidth.value;
+    });
+
     const sizeStyle = computed(() => {
         if (props.size > 0) {
             return { width: props.size + 'px', height: props.size + 'px' };