style is modified

projects/ucap-webmessenger-app/src/app/app.module.ts

@@ -5,6 +5,8 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
 import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
 import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
@@ -54,6 +56,8 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
 
     MatProgressBarModule,
 
+    PerfectScrollbarModule,
+
     UCapCommonApiModule.forRoot({ urls: environment.urls.apiCommon }),
 
     UCapPublicApiModule.forRoot({

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -1,5 +1,5 @@
-<div>
-  <mat-form-field>
+<div class="app-layout-chat-left-sidenav-chat-header">
+  <mat-form-field class="w-100-p">
     <input
       matInput
       #inputSearch
@@ -20,10 +20,13 @@
     </button>
   </mat-form-field>
 </div>
-<div style="height:100%">
-  <cdk-virtual-scroll-viewport itemSize="20" style="height: 100%">
+<div class="app-layout-chat-left-sidenav-chat-list" perfectScrollbar>
+  <cdk-virtual-scroll-viewport
+    itemSize="20"
+    class="app-layout-chat-left-sidenav-chat-list-viewport"
+  >
     <ucap-room-list-item
-      *ngFor="let room of getRoomList()"
+      *cdkVirtualFor="let room of getRoomList()"
       [loginRes]="loginRes"
       [roomInfo]="room"
       [roomUserInfo]="getRoomUserList(room)"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -1,3 +1,17 @@
+.app-layout-chat-left-sidenav-chat-header {
+  width: 100%;
+  height: 50px;
+}
+
+.app-layout-chat-left-sidenav-chat-list {
+  height: calc(100% - 50px);
+}
+
+.app-layout-chat-left-sidenav-chat-list-viewport {
+  width: 100%;
+  height: 100%;
+}
+
 .room-name {
   white-space: nowrap;
   overflow: hidden;

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -5,6 +5,8 @@ import { CommonModule } from '@angular/common';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -21,6 +23,8 @@ import { MatInputModule } from '@angular/material/input';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
 
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { UCapUiModule } from '@ucap-webmessenger/ui';
 import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat';
 import { UCapUiRoomModule } from '@ucap-webmessenger/ui-room';
@@ -39,6 +43,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     DragDropModule,
     ReactiveFormsModule,
     OverlayModule,
+    ScrollingModule,
     MatFormFieldModule,
     MatInputModule,
     MatBadgeModule,
@@ -53,6 +58,9 @@ import { ReactiveFormsModule } from '@angular/forms';
     MatTabsModule,
     MatToolbarModule,
     MatChipsModule,
+
+    PerfectScrollbarModule,
+
     UCapUiModule,
     UCapUiChatModule,
     UCapUiRoomModule,