3.0 Beta 3

src/app/chat/dm/dm.html

@@ -1,25 +1,28 @@
-@defer (when store) {
-  <navbar>
-    <div class="items-left">
-       <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
-      <div class="chat-data">
-        @if (store.chatData().displayName == "") {
-          <span class="main-name">{{'@'+store.chatData().username}}</span>
-        } @else {
-          <span class="main-name">{{store.chatData().displayName}}</span>
-          <span class="alt-name">{{'@'+store.chatData().username}}</span>
-        }
+<main [class.mobile]="breakpoint() == 'mobile'">
+  @defer (when store) {
+    <navbar backButtonDest="/chat">
+      <div class="items-left">
+        <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
+        <div class="chat-data">
+          @if (store.chatData().displayName == "") {
+            <span class="main-name">{{'@'+store.chatData().username}}</span>
+          } @else {
+            <span class="main-name">{{store.chatData().displayName}}</span>
+            <span class="alt-name">{{'@'+store.chatData().username}}</span>
+          }
+        </div>
       </div>
-    </div>
 
-    <div class="items-right">
-      <button tuiButton appearance="flat" disabled>
-        <tui-icon icon="@tui.phone"/>
-      </button>
-    </div>
-  </navbar>
+      <div class="items-right">
+        <button tuiButton appearance="flat" disabled>
+          <tui-icon icon="@tui.phone"/>
+        </button>
+      </div>
+    </navbar>
 
-  <messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
+    <messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
 
-  <message-box [viewModel]="store.messageBox"/>
-}
+    <message-box [viewModel]="store.messageBox"/>
+  }
+
+</main>

src/app/chat/dm/dm.scss

@@ -1,8 +1,17 @@
-:host {
+main {
   height: 95svh;
   display: grid;
   grid-template-rows: 70px minmax(0, 1fr) auto;
 
+  &.mobile {
+    height: 100svh;
+    padding: 15px;
+  }
+
+  .mobile {
+    height: 5px;
+  }
+
   navbar {
     .chat-data {
       display: flex;

src/app/chat/dm/dm.ts

@@ -5,7 +5,7 @@ import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
 import {IndexedDB} from '../../storage/indexed-db';
 import {Navbar} from '../elements/navbar/navbar';
 import {Oimg} from '../elements/oimg/oimg';
-import {TuiButton, TuiIcon} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
 import {FileDataWithPreview, MessageBox} from '../elements/message-box/message-box';
 import {Messages} from '../elements/messages/messages';
 import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
@@ -32,6 +32,7 @@ export class Dm implements OnInit {
   serviceManager = inject(ServiceManager)
   route = inject(ActivatedRoute)
   indexedDb = inject(IndexedDB)
+  breakpoint = inject(TUI_BREAKPOINT)
 
   chatid = ""