From 0bba0ef6fffc5075d710e39db20e161eb9100a0e Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Thu, 12 Dec 2024 17:36:08 -0800
Subject: [PATCH] Fix stories

---
 .../dashboard/components-next/message/Message.vue     |  4 ++--
 .../components-next/message/bubbles/Location.vue      | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 97cc8306b..d91af8a8f 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -123,7 +123,7 @@ const props = defineProps({
   },
   contentAttributes: {
     type: Object,
-    default: () => {},
+    default: () => { },
   },
   currentUserId: {
     type: Number,
@@ -319,7 +319,7 @@ provideMessageContext({
       >
         <Avatar
           :name="sender ? sender.name : ''"
-          :src="sender.thumbnail"
+          :src="sender?.thumbnail"
           :size="24"
         />
       </div>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Location.vue b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
index 19c4ce505..5266f3a81 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Location.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, nextTick } from 'vue';
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 import { useI18n } from 'vue-i18n';
 import maplibregl from 'maplibre-gl';
@@ -55,12 +55,14 @@ const mapUrl = computed(
   () => `https://maps.google.com/?q=${lat.value},${long.value}`
 );
 
+const mapContainer = useTemplateRef('mapContainer');
+
 const setupMap = () => {
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/positron',
     center: [long.value, lat.value],
     zoom: 9.5,
-    container: 'map',
+    container: mapContainer.value,
     attributionControl: false,
     dragPan: false,
     dragRotate: false,
@@ -93,7 +95,10 @@ onMounted(async () => {
     }"
   >
     <template #before>
-      <div id="map" class="z-10 w-full max-w-md -mb-12 min-w-64 h-28" />
+      <div
+        ref="mapContainer"
+        class="z-10 w-full max-w-md -mb-12 min-w-64 h-28"
+      />
     </template>
   </BaseAttachmentBubble>
 </template>