fix UI problems in chat and alert-component

Author: halbekanne

src/app/chat/chat.component.ts

@@ -27,7 +27,7 @@ import { interval, take } from 'rxjs';
         >
           <div class="flex h-[600px] border">
             <app-chat-conversation-list
-              class="min-w-[300px] overflow-y-auto border-r border-gray-300 py-2 max-md:flex-1 md:flex-none"
+              class="min-w-[300px] overflow-y-auto overflow-x-hidden border-r border-gray-300 py-2 max-md:flex-1 md:w-[300px] md:flex-none"
               [class.max-md:hidden]="chatState.activeChatId() !== null"
             ></app-chat-conversation-list>
             <div
@@ -73,9 +73,9 @@ import { interval, take } from 'rxjs';
 
       <ng-container *ngIf="chatState.chatsFetchState() === 'error'">
         <app-alert alertType="error" icon="error">
-          <p>
+          <span>
             Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
-          </p>
+          </span>
         </app-alert>
       </ng-container>
 

src/app/chat/ui/chat-messages/chat-messages.component.ts

@@ -17,9 +17,10 @@ import { map } from 'rxjs';
 @Component({
   selector: 'app-chat-messages',
   template: `
+    <!--    <div class="relative">-->
     <div
       *ngIf="ownUserId()"
-      class="flex h-[500px] flex-col-reverse overflow-auto p-8"
+      class="flex h-[452px] flex-col-reverse overflow-auto p-8"
     >
       <div class="flex flex-col gap-8">
         <app-chat-single-message
@@ -41,6 +42,7 @@ import { map } from 'rxjs';
         </div>
       </div>
     </div>
+    <!--    </div>-->
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,

src/app/chat/ui/conversation-list/chat-conversation-list-entry.component.ts

@@ -34,7 +34,9 @@ import { Profile } from '../../../profile/data-access/types/profile.types';
         }"
         (click)="chatState.selectChat$.next(conversation()!.id)"
       >
-        <div class="h-16 w-16 overflow-hidden rounded-full object-cover">
+        <div
+          class="h-16 w-16 shrink-0 overflow-hidden rounded-full object-cover"
+        >
           <img
             class=""
             [src]="
@@ -48,8 +50,10 @@ import { Profile } from '../../../profile/data-access/types/profile.types';
           />
         </div>
         <div class="flex flex-col gap-0">
-          <div class="text-2xl">{{ participant()!.dancerName }}</div>
-          <div class="text-lg text-gray-600">
+          <div class="truncate text-2xl">
+            {{ participant()!.dancerName }}
+          </div>
+          <div class="truncate text-lg text-gray-600">
             {{ participant()!.city }}
           </div>
         </div>

src/app/profile/feature/public-profile.component.ts

@@ -134,10 +134,10 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 
         <ng-container *ngIf="profileResponse.fetchStatus === 'error'">
           <app-alert alertType="error" icon="error" class="mx-auto">
-            <p>
+            <span>
               Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später
               erneut.
-            </p>
+            </span>
           </app-alert>
         </ng-container>
       </div>

src/app/recommendation/recommendations.component.ts

@@ -86,9 +86,9 @@ import { BehaviorSubject, filter, map, switchMap } from 'rxjs';
       <ng-template #error>
         <h1 class="page-header">Fehler bei der Abfrage der Empfehlungen</h1>
         <app-alert alertType="error" icon="error">
-          <p>
+          <span>
             Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
-          </p>
+          </span>
         </app-alert>
       </ng-template>
     </div>