Mobile menu

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;
+    }
+}

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`}>