3.0 Beta 6

src/app/chat/elements/message-box/message-box.html

@@ -50,7 +50,7 @@
 </ng-template>
 
 <main>
-  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()">
+  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()" [class.fullWidth]="breakpoint() != 'desktopLarge'">
     <div id="content">
       @if (viewModel().editingMessage()) {
         <tui-icon icon="@tui.pencil"></tui-icon>
@@ -59,7 +59,7 @@
           <tui-icon icon="@tui.paperclip"></tui-icon>
           <span>{{"chat.elements.messageBox.attachments"|translate}}</span>
         } @else {
-          {{viewModel().editingMessage()!.message}}
+          <span style="width: 300px" tuiScrollable tuiFade>{{viewModel().editingMessage()!.message}}</span>
         }
       }
     </div>

src/app/chat/elements/message-box/message-box.scss

@@ -67,6 +67,10 @@
       justify-content: center;
       height: 0;
 
+      &.fullWidth {
+        width: 100%;
+      }
+
       #content {
         padding-left: 10px;
         display: flex;

src/app/chat/elements/message-box/message-box.ts

@@ -5,7 +5,7 @@ import {
   TuiButton,
   TuiDialog,
   TuiGroup,
-  TuiIcon,
+  TuiIcon, TuiScrollable,
   TuiScrollbarDirective,
   TuiTextfield
 } from '@taiga-ui/core';
@@ -17,7 +17,7 @@ import {v4 as uuidv4} from 'uuid';
 import {Masonry} from '../masonry/masonry';
 import {Oimg} from '../oimg/oimg';
 import {FileData} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
-import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
+import {TuiFade, TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
 
 @Component({
   selector: 'message-box',
@@ -33,7 +33,9 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
     Oimg,
     Masonry,
     TuiTextfield,
-    TuiTextarea
+    TuiTextarea,
+    TuiScrollable,
+    TuiFade
   ],
   templateUrl: './message-box.html',
   styleUrl: './message-box.scss',