fix: Mobile style fixes and other small ui fixes

toju-app/src/app/domains/direct-message/feature/dm-workspace/dm-conversations-panel.component.html

@@ -1,6 +1,6 @@
 <aside
   appThemeNode="dmConversationsPanel"
-  class="flex min-h-0 overflow-hidden border-r border-border bg-card"
+  class="flex min-h-0 w-full min-w-0 overflow-hidden border-r border-border bg-card"
   [ngStyle]="listPanelStyles()"
 >
   <section class="flex h-full w-full min-w-0 flex-col">
@@ -28,10 +28,12 @@
         <div class="flex h-full items-center justify-center px-4 text-center text-sm text-muted-foreground">No direct messages yet.</div>
       } @else {
         <div class="space-y-1">
-          <app-dm-conversation-item
-            *ngFor="let conversation of directMessages.conversations(); trackBy: trackConversationId"
-            [conversation]="conversation"
-          ></app-dm-conversation-item>
+          @for (conversation of directMessages.conversations(); track trackConversationId($index, conversation)) {
+            <app-dm-conversation-item
+              [conversation]="conversation"
+              (conversationOpened)="conversationSelected.emit($event)"
+            />
+          }
         </div>
       }
     </div>