Improve DM unread indicators and profile modal layout

css/tailwind.source.css

@@ -237,10 +237,10 @@
 
   #profileUnreadDot {
     position: absolute;
-    top: var(--space-3xs);
-    right: var(--space-3xs);
-    width: calc(var(--space-2xs) + var(--space-3xs));
-    height: calc(var(--space-2xs) + var(--space-3xs));
+    top: var(--space-2xs);
+    right: var(--space-2xs);
+    width: var(--space-sm);
+    height: var(--space-sm);
     border-radius: 999px;
     border: var(--border-width-hairline) solid var(--color-page);
     background-color: var(--status-danger);
@@ -2820,6 +2820,7 @@
     min-block-size: 100%;
     max-block-size: none;
     overflow: hidden;
+    --modal-sheet-inline-max: var(--profile-modal-inline-max);
     --profile-modal-scale: 0.9;
     --profile-modal-gap: calc(
       (var(--space-md) - var(--space-3xs)) * var(--profile-modal-scale)
@@ -3008,6 +3009,23 @@
     overflow-x: hidden;
   }
 
+  .profile-nav__unread-dot {
+    position: absolute;
+    top: var(--space-3xs);
+    right: var(--space-3xs);
+    width: var(--space-sm);
+    height: var(--space-sm);
+    border-radius: 999px;
+    border: var(--border-width-hairline) solid var(--surface-panel);
+    background-color: var(--status-danger);
+    display: none;
+    pointer-events: none;
+  }
+
+  .profile-nav__unread-dot.is-visible {
+    display: block;
+  }
+
   .profile-modal__panes {
     display: flex;
     flex: 1 1 auto;
@@ -5006,6 +5024,12 @@
     min-height: 100vh;
   }
 
+  .profile-modal .dm-app-shell {
+    min-height: 0;
+    height: auto;
+    padding: var(--space-md);
+  }
+
   .dm-app-shell__sidebar,
   .dm-app-shell__main {
     border-radius: var(--radius-lg);
@@ -5014,6 +5038,12 @@
     box-shadow: var(--shadow-soft);
   }
 
+  .profile-modal .dm-app-shell__sidebar,
+  .profile-modal .dm-app-shell__main {
+    height: auto;
+    min-height: 0;
+  }
+
   .dm-app-shell__sidebar {
     display: flex;
     flex-direction: column;
@@ -5035,6 +5065,11 @@
     background: var(--surface-raised);
   }
 
+  .profile-modal .dm-app-shell__main,
+  .profile-modal .dm-app-shell__sidebar {
+    min-width: 0;
+  }
+
   .dm-conversation-list {
     display: flex;
     flex-direction: column;
@@ -5686,8 +5721,8 @@
     }
 
     .dm-app-shell__sidebar {
-    flex: 0 0 var(--size-18rem);
-    max-width: var(--size-20rem);
+      flex: 0 0 var(--size-18rem);
+      max-width: var(--size-20rem);
       height: calc(100vh - var(--space-lg) * 2);
     }
 
@@ -5701,6 +5736,24 @@
     }
   }
 
+  @media (min-width: theme("screens.md")) {
+    .profile-modal .dm-app-shell {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    .profile-modal .dm-app-shell__sidebar {
+      flex: 0 0 var(--size-18rem);
+      max-width: var(--size-20rem);
+      height: auto;
+    }
+
+    .profile-modal .dm-app-shell__main {
+      flex: 1 1 auto;
+      height: auto;
+    }
+  }
+
   @media (min-width: theme("screens.lg")) {
     .dm-app-shell__sidebar {
       flex-basis: var(--size-20rem);

css/tokens.css

@@ -322,6 +322,7 @@
   --size-28rem: 28rem;
   --size-34rem: 34rem;
   --size-45rem: 45rem;
+  --size-70rem: 70rem;
 
   /* Border radii */
   --radius-sm: 0.25rem;
@@ -343,6 +344,7 @@
   --modal-shell-max-height: 90vh;
   --modal-sheet-max-height: 92vh;
   --modal-body-max-height: calc(92vh - 4rem);
+  --profile-modal-inline-max: var(--size-70rem);
   --player-modal-module-scroll-min-height: var(--size-14rem);
   --player-modal-module-scroll-max-height: var(--size-28rem);
   --modal-pane-max-height: 48vh;