From f8592ef94533c1ae0b443d18d566691f7ab84b37 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Wed, 1 May 2024 15:00:22 +0300
Subject: [PATCH] styling changes

---
 ...pp-notification-listing-dialog.component.html | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html b/dmp-frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html
index 6336e9f4a..c7182685d 100644
--- a/dmp-frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html
+++ b/dmp-frontend/src/notification-service/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.html
@@ -5,14 +5,18 @@
 			<mat-nav-list class="inapp-notification-listing-dialog">
 				<ng-container *ngFor="let inappNotification of inappNotifications; last as last;">
 					<a mat-list-item (click)="goToNotification(inappNotification)">
-						<div class="d-flex justify-content-between">
-							<div class="d-flex">
-								<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon class="mr-3">drafts</mat-icon>
-								<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon class="mr-3">mail</mat-icon>
-								<span mat-line class="mt-1">{{ inappNotification.subject | sumarizeText:18 }}</span>
+						<div class="row justify-content-between">
+							<div class="col-auto">
+								<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Delivered" mat-list-icon>drafts</mat-icon>
+								<mat-icon *ngIf="inappNotification.trackingState === notificationInAppTrackingEnum.Stored" mat-list-icon>mail</mat-icon>
+							</div>
+							<div class="col mt-1 pl-0" style="overflow: hidden; text-overflow: ellipsis;">
+								<span mat-line>{{ inappNotification.subject }}</span>
 							</div>
 							
-							<span mat-line class="mt-1 secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
+							<div class="col-auto mt-1">
+								<span mat-line class="secondary-text">{{ inappNotification.createdAt | date : 'short'}}</span>
+							</div>
 						</div>
 					</a>
 					<mat-divider *ngIf="!last"></mat-divider>