根本原因是 body 和 html 被设置了 max-width: 1920px，导致窄屏下导航栏无法收缩适配；需删除该限制，并为导航栏添加移动断点、汉堡菜单及 flex-wrap 等响应式样式。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
窄屏设备上导航栏内容被截断、文字换行错乱或图标堆叠溢出，根本原因不是导航栏自身样式问题，而是其父容器（尤其是 body 或 html）设置了固定宽度限制或未启用响应式断点控制。
移除全局 max-width 约束
打开 AionClaw 客户端安装目录下的 resources/app.css（Windows 路径示例：C:\Program Files\AionClaw\resources\app.css；Mac 路径：/Applications/AionClaw.app/Contents/Resources/app.css）。
查找并删除以下两行代码：
body, html { max-width: 1920px; }
这一步必须做——【max-width: 1920px 是窄屏导航栏失效的直接根源】。它强制整个页面在任何视口下都不超过 1920px，当屏幕宽度小于该值时，body 实际可用宽度仍被锁死，导致内部导航栏无法收缩适配，只能横向滚动或内容挤压。
为导航栏添加移动优先断点
在同一个 app.css 文件末尾追加如下 CSS 块：
@media (max-width: 768px) {<br> .navigation-bar {<br> padding: 0 1rem;<br> height: 60px;<br> }<br> .navigation-bar .logo {<br> max-width: 120px;<br> }<br> .navigation-bar .menu-items {<br> display: none;<br> }<br> .navigation-bar .hamburger {<br> display: flex;<br> }<br>}
这段代码只在屏幕宽度 ≤768px 时生效，它把右侧菜单项隐藏、显示汉堡图标，并压缩内边距和高度。注意：.hamburger 类需确保已在 HTML 中存在，若客户端未内置该元素，需同步修改对应 HTML 模板文件（路径为 resources/index.html），在导航栏右侧插入 <div class="hamburger">☰</div>。
启用 Flex 布局弹性收缩
找到 .navigation-bar 的原始定义块（通常含 display: flex），在其内部添加三行关键声明：
flex-wrap: wrap;<br>justify-content: space-between;<br>align-items: center;
flex-wrap: wrap 允许子元素在空间不足时自动换行，而不是强行撑开容器；不加这一句，窄屏下 logo 和菜单会重叠或溢出右侧边界。justify-content 和 align-items 保持居中逻辑不变，避免换行后上下错位。
验证窄屏行为是否生效
方法一：在 AionClaw 客户端中按 Cmd+Option+I（Mac）或 Ctrl+Shift+I（Windows）打开开发者工具 → 切换设备模拟器 → 选择 iPhone SE 或自定义 375×667 尺寸 → 刷新界面观察导航栏。
方法二：直接缩小主窗口宽度至 400px，检查是否出现横向滚动条——若仍有，则说明 body 的 max-width 未彻底清除，需重新检查 app.css 中所有出现 max-width 的地方，包括可能嵌套在 @media 内的规则。
