From 5b067b8a2c8ee1e73861c4f010b2dc88b6d8e5be Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Thu, 9 Apr 2026 13:34:48 +0000
Subject: [PATCH] Fix styling on mobile

---
 src/games/storywriter/assets/chat-sidebar.module.css | 10 ++++++++++
 src/games/storywriter/assets/editor.module.css       |  4 ++++
 src/games/storywriter/components/chat-sidebar.tsx    |  2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/games/storywriter/assets/chat-sidebar.module.css b/src/games/storywriter/assets/chat-sidebar.module.css
index 246751b..4162d2e 100644
--- a/src/games/storywriter/assets/chat-sidebar.module.css
+++ b/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 {
diff --git a/src/games/storywriter/assets/editor.module.css b/src/games/storywriter/assets/editor.module.css
index ac07066..41b3cfd 100644
--- a/src/games/storywriter/assets/editor.module.css
+++ b/src/games/storywriter/assets/editor.module.css
@@ -175,4 +175,8 @@
     .editor {
         padding-top: 12px;
     }
+
+    .title {
+        display: none;
+    }
 }
diff --git a/src/games/storywriter/components/chat-sidebar.tsx b/src/games/storywriter/components/chat-sidebar.tsx
index fc0fd7b..61a87eb 100644
--- a/src/games/storywriter/components/chat-sidebar.tsx
+++ b/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}