Fix styling on mobile

src/games/storywriter/assets/chat-sidebar.module.css

@@ -37,6 +37,7 @@
     justify-content: space-between;
     align-items: center;
     gap: 8px;
+    min-width: 0;
 }
 
 .messageActions {
@@ -135,6 +136,15 @@
     flex-direction: row;
     gap: 4px;
     align-items: center;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.role > span:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
 }
 
 .reasoningContent {

src/games/storywriter/assets/editor.module.css

@@ -175,4 +175,8 @@
     .editor {
         padding-top: 12px;
     }
+
+    .title {
+        display: none;
+    }
 }

src/games/storywriter/components/chat-sidebar.tsx

@@ -49,7 +49,7 @@ const RoleHeader = ({ message, chatMessages }: RoleHeaderProps) => {
 
     return (
         <div class={styles.role}>
-            {displayName}
+            <span>{displayName}</span>
             {roleLabel && (
                 <span class={styles.toolBadge}>
                     {message.role}