From e28835846b0127d9954a5c22d38bbf83af4b033d Mon Sep 17 00:00:00 2001
From: Pabloader <pabloader@pabloader.ru>
Date: Wed, 8 Apr 2026 10:51:38 +0000
Subject: [PATCH] Mobile menu

---
 .../assets/settings-modal.module.css          | 34 +++++++++++++++++++
 .../components/settings/connection.tsx        |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/games/storywriter/assets/settings-modal.module.css b/src/games/storywriter/assets/settings-modal.module.css
index b76986d..1958a61 100644
--- a/src/games/storywriter/assets/settings-modal.module.css
+++ b/src/games/storywriter/assets/settings-modal.module.css
@@ -251,3 +251,37 @@
 .emptyText {
     color: var(--text-muted);
 }
+
+@media (max-width: 600px) {
+    .body {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        flex-direction: row;
+        width: 100%;
+        overflow-x: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+        padding: 4px 8px;
+        flex-shrink: 0;
+        scrollbar-width: none;
+    }
+
+    .sidebar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .menuItem {
+        flex: 1;
+        justify-content: center;
+        text-align: center;
+        white-space: nowrap;
+        padding: 8px;
+        font-size: 13px;
+    }
+
+    .footer {
+        padding: 12px 16px;
+    }
+}
diff --git a/src/games/storywriter/components/settings/connection.tsx b/src/games/storywriter/components/settings/connection.tsx
index 792169a..cc08e25 100644
--- a/src/games/storywriter/components/settings/connection.tsx
+++ b/src/games/storywriter/components/settings/connection.tsx
@@ -155,7 +155,7 @@ export const ConnectionSettings = () => {
                                 value={selectedModel}
                                 onChange={handleModelChange}
                                 class={clsx(styles.select, styles.selectMultiline)}
-                                size={8}
+                                size={3}
                             >
                                 {filteredGroupedModels.map(({ context, models }) => (
                                     <optgroup key={context} label={`${context} context`}>