Files
cherry-studio/src/renderer
Phantom c4e22a23ea fix: add responsive design for sidebar tabs to prevent content cutoff (#9913)
* fix: add responsive design for sidebar tabs to prevent content cutoff at minimum width

- Add responsive CSS variables and media queries for narrow screens
- Update Container, AssistantItem, and TopicListItem to use responsive widths
- Ensures settings tab content remains visible at minimum window width (520px)
- Addresses issue where right sidebar content gets cut off on smaller screens

Fixes #9894

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Pleasure1234 <Pleasurecruise@users.noreply.github.com>

* fix(i18n): Auto update translations for PR #9913

* feat(样式): 添加响应式断点配置和媒体查询工具

添加 breakpoints.scss 文件定义断点变量和 CSS 变量
在 style.ts 中新增 breakpoints 配置和 media 工具函数,用于生成响应式媒体查询

* style: 添加 breakpoints.scss 到主样式文件

* style(styles): 添加响应式断点变量并更新引用

将 breakpoints.scss 重命名为 responsive.scss 并添加断点变量定义
更新 index.scss 中的引用以使用新的文件名

* style(color.scss): 移除未使用的窄屏幕助手宽度变量

* refactor(styles): 将布局变量从color.scss移动到responsive.scss并添加响应式设计

将布局相关的CSS变量从color.scss迁移到responsive.scss以更好地组织代码
添加针对大屏幕的响应式布局调整

* refactor(布局): 简化容器宽度设置并添加过渡动画

移除响应式宽度媒体查询,统一使用变量控制宽度
为容器和标签内容添加宽度过渡动画效果
调整导航栏图标顺序和样式

* style: 移除响应式宽度媒体查询以简化样式

* fix(style): 将媒体查询条件从min-width改为max-width

* refactor(style): 移除未使用的响应式样式工具代码

清理不再使用的断点常量和媒体查询工具函数,这些代码当前未被项目使用

---------

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Pleasure1234 <Pleasurecruise@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-07 13:36:33 +08:00
..