How to solve this error on my ionic template html for messaging chat

I created a room messaging chat with ionic angular , all work fine but i have a problem in messages rows for messages of others users , the row work fine all the columns show in same row but for my Msgs the logo is showing on the top as first row and rest of msg showing in a second row, where is the problem ?

my chat component ( html , css , ts)

<ion-title>Chat</ion-title>

<ion-buttons slot="end">

  <ion-button fill="clear" (click)="signOut()">

    <ion-icon name="log-out" slot="icon-only"></ion-icon>

  </ion-button>

</ion-buttons>
<ion-row *ngFor="let message of messages ">

 

  <ion-col size="3" *ngIf="message.myMsg">

    <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">

  </ion-col>

  <ion-col size="9" class="message" [offset]="message.myMsg ? 3 : 0"

    [ngClass]="{ 'my-message': message.myMsg, 'other-message': !message.myMsg }">

    <b style="color: black;">{{ message.fromName }}</b> <br>

    <span>{{ message.msg }}

    </span>

    <div class="time ion-text-right"><br>{{ message.createdAt?.toMillis() | date:'short' }}</div>

  </ion-col>

  <ion-col size="3" *ngIf="!message.myMsg">

    <img [src]="message.userphoto" class="img-thumbnail" width="50" height="50">

  </ion-col>

</ion-row>
<ion-row class="ion-align-items-center">

  <ion-col size="10">

    <ion-textarea style="color:black;border-radius: 5%;" placeholder="Aa" autoGrow="true" class="message-input"

      rows="1" maxLength="500" [(ngModel)]="newMsg">

    </ion-textarea>

  </ion-col>

  <ion-col size="2">

    <ion-button icon-only item-right (click)="sendMessage()" color="light">

      <ion-icon color="primary" name="send"></ion-icon>

    </ion-button>

  </ion-col>

</ion-row>
chat.component.ts : import { Component, OnInit, ViewChild } from '@angular/core';

import { IonContent } from ‘@ionic/angular’;

import { Observable } from ‘rxjs’;

import { ChatService } from ‘…/chat.service’;

import { Router } from ‘@angular/router’;

import { AngularFireStorage, AngularFireUploadTask } from ‘@angular/fire/compat/storage’;

import { AngularFirestore, AngularFirestoreCollection } from ‘@angular/fire/compat/firestore’;

import { finalize, tap } from ‘rxjs/operators’;

export interface FILE {

name: string;

filepath: string;

size: number;

}

@Component({

selector: ‘app-chat’,

templateUrl: ‘./chat.page.html’,

styleUrls: [’./chat.page.scss’],

})

export class ChatPage implements OnInit {

ngFireUploadTask: AngularFireUploadTask;

progressNum: Observable;

progressSnapshot: Observable;

fileUploadedPath: Observable;

room: any;

files: Observable<FILE>;

ImgtoSend: any;

FileName: string;

FileSize: number;

photo: string;

isImgUploading: boolean;

isImgUploaded: boolean;

photos: any = ;

private ngFirestoreCollection: AngularFirestoreCollection;

@ViewChild(IonContent) content: IonContent;

messages: any = ;

newMsg = ‘’;

users: any = ;

constructor(private angularFirestore: AngularFirestore,

private angularFireStorage: AngularFireStorage, private chatService: ChatService, private router: Router) {

this.isImgUploading = false;

this.isImgUploaded = false;

this.ngFirestoreCollection = angularFirestore.collection<FILE>('filesCollection');

this.files = this.ngFirestoreCollection.valueChanges();

}

async ngOnInit() {

return (await this.chatService.getChatMessages()).subscribe(res => {

  this.messages = res.filter(a => a.fromName != "Deleted");

  console.log("messages returned"+JSON.stringify(this.messages));

  this.messages.forEach(m => {

    console.log(m.from);

  });

}

);

}

getphotoOfUsers(uid) {

console.log(uid);

return this.chatService.getUsers().then(res => {

  res.subscribe(result => {

    this.photo = result.filter(a => a.uid == uid).map(a => a.photo).toString();

    console.log("photo" + this.photo);

  }

  )

}

)

}

sendMessage() {

this.chatService.getUsers().then(res => {

  res.subscribe(result => {

    this.photo = result.filter(a => a.uid == this.chatService.currentUser.uid).map(a => a.photo).toString();

    console.log("photo" + this.photo);

    this.chatService.addChatMessage(this.newMsg, this.photo).then(() => {

      this.newMsg = '';

      this.photo ='';

      this.content.scrollToBottom();

    });

  }

  )

});

}

signOut() {

this.chatService.signOut().then(() => {

  this.router.navigateByUrl('/login', { replaceUrl: true });

});

}

fileUpload(event: FileList) {

const file = event.item(0)

if (file.type.split('/')[0] !== 'image') {

  console.log('File type is not supported!')

  return;

}

this.isImgUploading = true;

this.isImgUploaded = false;

this.FileName = file.name;

const fileStoragePath = `filesStorage/${new Date().getTime()}_${file.name}`;

console.log("filestoragepath" + fileStoragePath);

const imageRef = this.angularFireStorage.ref(fileStoragePath);

console.log("image ref" + imageRef);

this.ngFireUploadTask = this.angularFireStorage.upload(fileStoragePath, file);

this.ImgtoSend = this.FileName;

console.log("image to Send" + this.ImgtoSend);

this.progressNum = this.ngFireUploadTask.percentageChanges();

this.progressSnapshot = this.ngFireUploadTask.snapshotChanges().pipe(

  finalize(() => {

    this.fileUploadedPath = imageRef.getDownloadURL();

    console.log("uploaded path" + this.fileUploadedPath);

    this.fileUploadedPath.subscribe(resp => {

      this.fileStorage({

        name: file.name,

        filepath: resp,

        size: this.FileSize

      });

      this.isImgUploading = false;

      this.isImgUploaded = true;

    }, error => {

      console.log(error);

    })

  }),

  tap(snap => {

    this.FileSize = snap.totalBytes;

  })

)

}

fileStorage(image: FILE) {

const ImgId = this.angularFirestore.createId();

this.ngFirestoreCollection.doc(ImgId).set(image).then(data => {

  console.log("data" + data);

}).catch(error => {

  console.log(error);

});

}

}