画布底部工具栏不再横向滚动,工具放不下就换行

- packages/image-canvas-react:共享工具栏去掉 overflow-x/scrollbar-width 的「滚动容器」语义与滚动条隐藏,改为 flex-wrap 换行,尾部工具不再被裁掉
- src/index.css:画布底部工具栏宽度上限 34rem 提到 42rem,13 个工具在桌面宽度下回到一行,窄屏按共享能力换行并居中
- apps/ai-game-creator-shell:资源画布底部工具栏删掉与共享默认重复的 overflow/flex-wrap 覆盖,只保留限宽
This commit is contained in:
2026-09-24 14:30:34 +08:00
parent d1e11c705d
commit cc095a7620
4 changed files with 19 additions and 8 deletions
+7 -1
View File
@@ -6695,12 +6695,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
);
}
/*
* 画布底部工具栏:13 个工具 + 3 个分隔符在 34rem 上限下会溢出,溢出后的横向滚动
* 会把尾部工具整段裁掉(滚动条按设计不可见)。这里给足一行放得下的宽度,并在窄屏
* 交给共享工具栏的换行能力,取「换行」不取「滚动」。
*/
.image-canvas-editor__bottom-toolbar {
position: absolute;
left: 50%;
bottom: 0.85rem;
z-index: 18;
max-width: min(calc(100% - 6.6rem), 34rem);
max-width: min(calc(100% - 6.6rem), 42rem);
justify-content: center;
transform: translateX(-50%);
}