Make map 100% width on message

Took 4 minutes

src/components/chat/ChatListItem.tsx

@@ -1,5 +1,5 @@
 import {Chat, User} from '@prisma/client';
-import {Box, Button, Flex, Image, Text} from '@chakra-ui/react';
+import {Avatar, Box, Flex, Text} from '@chakra-ui/react';
 import {useRouter} from 'next/router';
 
 type Props = {
@@ -11,11 +11,9 @@ export default function ChatListItem({user, chat}: Props) {
   const router = useRouter();
   const otherUser = chat.User.find((u: User) => u.id !== user.id) as User;
 
-  console.log(chat);
-
   return (
       <Flex alignItems={"center"} gap={5} cursor={'pointer'} onClick={() => router.push(`/chat/${chat.id}`)}>
-        <Image borderRadius={'full'} boxSize="50px" src={otherUser.images[0] ?? '/blank_profile_picture.webp'}/>
+        <Avatar borderRadius={'full'} boxSize="50px" name={`${otherUser.firstName} ${otherUser.lastName}`} src={otherUser.images[0] ?? ''}/>
         <Box>
           <Text>{otherUser.firstName} {otherUser.lastName}</Text>
         </Box>

src/components/chat/MapBar.tsx

@@ -1,7 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import { MapContainer, Marker, TileLayer } from "react-leaflet";
+import { MapContainer, TileLayer } from "react-leaflet";
 import SimpleMarkerBar from "./SimpleMarkerBar";
-import MarkerClusterGroup from "@christopherpickering/react-leaflet-markercluster";
 import "leaflet/dist/leaflet.css";
 
 type MapBarProps = {
@@ -19,7 +18,7 @@ export default function MapBar({ lat, lon, name, align }: MapBarProps) {
         zoom={13}
         minZoom={6}
         zoomControl={false}
-        style={{ width: "50%", height: "20rem" }}
+        style={{ width: "100%", height: "20rem" }}
       >
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

src/components/chat/Message.tsx

@@ -1,7 +1,6 @@
 import type {Message as MessageType} from '@prisma/client';
 import MessageText from '@/components/chat/MessageText';
 import React from 'react';
-import { Icon } from "leaflet";
 import MessageMap from '@/components/chat/MessageMap';
 
 type Props = {

src/components/chat/MessageMap.tsx

@@ -1,13 +1,13 @@
-import { Box, Text } from "@chakra-ui/react";
+import {Box, Flex, Text} from '@chakra-ui/react';
 
-import dynamic from "next/dynamic";
+import dynamic from 'next/dynamic';
 
-const MapBarWithNoSSR = dynamic(() => import("./MapBar"), {
+const MapBarWithNoSSR = dynamic(() => import('./MapBar'), {
   ssr: false,
 });
 
 type Props = {
-  align: "left" | "right";
+  align: 'left' | 'right';
   point: {
     lon: string;
     lat: string;
@@ -15,19 +15,14 @@ type Props = {
   };
 };
 
-export default function MessageMap({ align, point }: Props) {
-  const { lon, lat, name } = point;
+export default function MessageMap({align, point}: Props) {
+  const {lon, lat, name} = point;
   return (
-    <Box>
-      <MapBarWithNoSSR
-        lon={lon}
-        lat={lat}
-        name={name}
-        align={align}
-      ></MapBarWithNoSSR>
-      <Text align={align}>
-        {lon}, {lat}, {name}
-      </Text>
-    </Box>
+      <Flex justifyContent={align}>
+        <Box w={'50%'} bg={'purple.500'} borderRadius={10} p={2}>
+          <MapBarWithNoSSR lon={lon} lat={lat} name={name}/>
+          {/*<Text align={align}>{lon}, {lat}, {name}</Text>*/}
+        </Box>
+      </Flex>
   );
 }